Rollovers activated for the shapes in this image.

Ever need to display rollover of multiple areas for a single image? Check out this article i found!

Imagemaps

Let’s say we want to have rollovers activated for the shapes in this image. Since this is one image, not three, we need to attach an imagemap. Mouse over the image below, and you can see it in action. As you can see from the HTML, the picture is in file shapes0.png.

<img src="rollover/shapes0.png" name="shapes" usemap="#shapemap"
    width="283" height="103" alt="square, circle, and triangle"
    border="0" />

Important: It is not possible to replace a part of an image. We have to replace the whole image, so we will need the following image files (named shapes1.png, shapes2.png, and shapes3.png):

The imagemap will look like a normal imagemap, except that we will add onmouseover and onmouseout attributes to invoke JavaScript.

<map name="shapemap">
    <area shape="rect" coords="20,17,86,88"
        href="#" onmouseover="highlight(1);" onmouseout="highlight(0);" />
    <area shape="circle" coords="134,53,30"
        href="#" onmouseover="highlight(2);" onmouseout="highlight(0);" />
    <area shape="polygon" coords="227,10,180,88,280,88,227,10"
        href="#" onmouseover="highlight(3);" onmouseout="highlight(0);" />
</map>   http://catcode.com/cit041j/js_images2.html