Change background of mapped image hotspot on mouseover
css, html, imagemap, javascript
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.
Problem
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.