Accessible Thumbnail Gallery Techniques (working without JS)

[callMeAl]

Hi,

I want to make a thumbnail gallery with hover effect(standard picture changes to other one when user roll cursor over the thumbnail). It's easy to do with JS but I'd like to make the gallery working for visitors with JS turned off.

Standard code working only with JS would be:


<div class="thumbnail-wrap">
<a href="page001.html">
<img src="image001a.jpg"
onmouseover="change_img_src_to_image001b.jpg"
onmouseout="change_img_src_to_image001a.jpg"/>
</a>
</div>

<div class="thumbnail-wrap">
<a href="page002.html">
<img src="image002a.jpg"
onmouseover="change_img_src_to_image002b.jpg"
onmouseout="change_img_src_to_image002a.jpg"/>
</a>
</div>

Now, I have two solutions and I would like to ask you about your opinion about which one would be better.

1) Instead of <img> within <a> tags put <div>. Each <div> would have its own ID generated by server-side script(in order to assign :hover pseudo-class). The image file would be a div's background. CSS:

CSS:
div#001 {
display: inline;
background: url("image001a.jpg");
}

div#001:hover {
background: url("image001b.jpg");
}



2) Put 2 <img>s within an <a> tag and position them with z-index.


HTML:

<div class="thumbnail-wrap">
<a href="page001.html">
<img src="image001a.jpg" id="001a" />
<img src="image001b.jpg" id="001b" />
</a>
</div>


CSS:

img#001a { z-index: 2; }
img#001a:hover { display: none; }
img#001b { z-index: 1; }


What do you think about this solutions? Maybe you've got some better ideas? My main concern in this instance is cross-browser compatibility(I haven't tested this yet).

Thanks:),
Al

[Fang]

Photo galleries (http://www.cssplay.co.uk/menu/)