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.

Solution 1:

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 00 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.

Share