Image on top of image on mouseover

I'm looking at how to do something similar to this page: http://www.gap.com/browse/category.do?cid=15043

When you mouseover a shirt, it shows the Quick Look image. I can not figure out how to show the image when you mouseover. The tricky part is that you can still click on the shirt and then that will take you to the product page. If you click on the Quick Look image it takes you to a modal window. I've got the modal window working the way I want, I just don't know how to display a Quick Look type image over the main product image on mouse ov开发者_开发百科er.

Any help would be appreciated! Thanks!

The best way I can think to do this is to use jquery to make an onmouseover event that swaps the image reference for the new reference, then make an onmouseout event that puts the original image reference back in place

You could use CSS to accomplish this. I use a div in this example but and image should work as well: Live example

html

<a href="#"><div class="img">info here</div></a>

css

a{
    display:block;
    background-color:#666;
    width:100px;
    height:100px;
}

a div.img{
    display:none;
}

a:hover div.img{
    display:block;
}