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

Change background of mapped image hotspot on mouseover

本文关键字：图像 热点 背景 映射 鼠标 悬停      更新时间：2023-09-26

我有一个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实现这一点，有什么建议吗？提前谢谢。

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;
}

应该做这个把戏。你也可以使用背景图像：url（"/images/map2.gif"）-背景同时提供了更多选项，如背景重复、背景位置等。

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

相关文章：