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