我有一张图像地图,我希望这样做,当一个人悬停在某一部分上时,会加载不同的图像。我已经搜索过,但一直找不到任何东西,所以如果你能把我联系到一个很好的答案。如果没有,我更喜欢纯css解决方案。如果那是不可能的,请详细说明实现javascript / jquery,因为我没有任何经验。
这是我的HTML:
<img src="image.jpg" alt="" usemap="map">
<map name="quadlinemap">
<area shape="circle" coords="105,92,77" href="image1.jpg">
<area shape="circle" coords="795,88,77" href="image2.jpg">
<area shape="circle" coords="106,309,77" href="image3.jpg">
<area shape="circle" coords="801,322,76" href="images4.jpg">
</map>
我不确定href会发生什么,我不知道使用什么CSS。提前致谢
答案 0 :(得分:1)
据我所知,您有一组图像,并且当您将图像悬停在图像上时,您希望显示不同的图像。你可以用纯CSS做到这一点。您可以使用javascript找到更简单的解决方案,但这是我的尝试。 在这种情况下,你的Html就像
<img src="image.jpg" alt="" usemap="map">
<map name="quadlinemap">
<area class="one" shape="circle" coords="105,92,77">
<area class="two" shape="circle" coords="795,88,77">
<area class="three" shape="circle" coords="106,309,77">
<area class="four" shape="circle" coords="801,322,76">
</map>
和CSS
.one {
width: 100px;
height: 100px;
background: url('image1.jpg');
}
.one:hover {
background: url('image1_when_hover.jpg');
}
类似于图像二,三和四
PS:我没试过这段代码。您可以使用z-index值。