Search code examples
javascripthtmlcssimagemap

Change background of mapped image hotspot on mouseover

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>

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.

Solution

  • 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 recommend http://www.css4you.de/borderproperty.html as a good reference site with good examples.