我有 3 个多边形的图像图。实际的图像热点是由多条曲线和边缘组成的复杂形状。
<img src="/images/map.gif" alt="HTML Map"
border="0" usemap="#map"/>
<map name="map">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="index.htm" alt="area1" />
<area shape="poly"
coords="22,83,126,125"
href="index.htm" alt="area2" />
<area shape="poly"
coords="73,168,32"
href="index.htm" alt="area3" />
</map>
我创建了一个名为map_over.gif 的map.gif 副本,并以不同的颜色呈现。我想做的是在鼠标悬停时将 map.gif 的可点击热点内的区域更改为 map_over.gif 。关于如何使用 CSS 或 Javascript 完成此任务,有什么建议吗?提前致谢。
这是个简单的。
html:
<img src="/images/map.gif" alt="HTML Map" border="0" usemap="#map" id="mappedImage" />
css:
img#mappedImage:hover {
background: url("/images/map2.gif") no-repeat scroll 0 0 transparent;
}
应该做到这一点。您也可以使用background-image: url("/images/map2.gif") - 背景同时提供更多选项,例如背景重复、背景位置等。
至于任何关于CSS的问题我可以推荐http://www.css4you.de/borderproperty.html作为一个很好的参考网站,有很好的例子。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)