Images

[_tina_]

Hi,

 

I have three large images and three thumbnails.  I want to rollover the thumbnails and change the large picture.

 

Do you know how I can do this?  All the examples I see seem to mainly do it for buttons.

 

Thank you.

[haku]

(X)HTML:

<div id="container">
<div id="display"></div>
</div>

 

CSS:

#container
{
height:20px; // height of tiny.png
width:20px; // width of tiny.png
background:url(tiny.png) no-repeat left top;
position:relative;
}

#display
{
height:35px; // height of big.png
width:35px; //width of big.png
display:none;
background:url(big.png) no-repeat left top;
position:absolute;
top:-7px; // half the difference of the heights of the two images ((35px - 20px) / 2) = 7.5px
left:-7px; // half the difference of the widths of the two images ((35px - 20px) / 2) = 7.5px
}

#container:hover #display
{
display:block;
}

[haku]

Note: the above code won't work on IE6, so if you want to support IE6 you will have to add a javascript solution in order for this to work.