javascript - 在鼠标悬停时更改映射图像热点的背景

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_over.gif 的 map.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") - background 同时提供更多选项，例如 background-repeat、background-position 等。

至于关于 css 的任何问题，我可以推荐http://www.css4you.de/borderproperty.html作为一个很好的参考站点，其中有很好的例子。