Image on top of image on mouseover

Question

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 over.

Any help would be appreciated! Thanks!

Answer 1

我能想到的最好方法是使用jquery进行一个onmouseover事件，该事件将图像参考交换为新参考，然后进行一个onmouseout事件，以将原始图像参考放回原处。

Answer 2

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;
}