更改mouseover上映射图像热点的背景

Question

我有一个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.gif的一个副本，名为map_over.gif，它以不同的颜色呈现。我想要做的是将map.gif的可点击热点区域内的区域更改为鼠标悬停时的map_over.gif。有关如何使用CSS或Javascript完成此任务的任何建议？提前致谢。

Answer 1

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作为一个很好的参考网站和很好的例子。