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

问题描述

我有一个3个多边形的图像映射。实际图像热点是由多个曲线和边缘组成的复杂形状。

I have an image map of 3 polygons. The actual image hotspots are complex shapes consisting of multiple curves and edges.

<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完成这个？提前致谢。

I've created a duplicate of map.gif called map_over.gif rendered in a different color. What I'd like to do is change the area within the clickable hotsposts of map.gif to map_over.gif on mouse hover. Any suggestions as to how I could accomplish this with CSS or Javascript? Thanks in advance.

推荐答案

a这是一个简单的方法。

aThis is an easy one.

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-repeat，background-position等。

Should do the trick. You could use the background-image: url("/images/map2.gif") as well - background provides more options at once like background-repeat, background-position etc.

至于有关CSS的任何问题，我可以推荐作为良好的参考网站。

As for any questions about css I can recommend http://www.css4you.de/borderproperty.html as a good reference site with good examples.

这篇关于在鼠标悬停时更改映射图像热点的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！