javascript - Change background of mapped image hotspot on mouseover - Stack Overflow

admin管理员组

文章数量:1389761

I have an image map of 3 polygons. The actual image hotspots are plex 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>

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 acplish this with CSS or Javascript? Thanks in advance.

I have an image map of 3 polygons. The actual image hotspots are plex 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>

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 acplish this with CSS or Javascript? Thanks in advance.

• javascript
• html
• css
• imagemap

Share Follow asked Aug 24, 2012 at 19:17 dcd0181dcd0181 1,51344 gold badges2929 silver badges5252 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

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.

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

本文标签： javascriptChange background of mapped image hotspot on mouseoverStack Overflow