我有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的可点击hotsposts中的区域更改为map_over.gif。有关如何使用CSS或Javascript实现此目的的任何建议?提前致谢。
答案 0 :(得分:3)
a这很简单。
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作为一个很好的参考网站。