How to turn specific area of an image into clickable link

The USEMAP attribute is used to turn specific areas of an image into clickable links. Take the image below, for example. We don't want the whole of the image to be a hyperlink, just the coloured shapes.

If you hold your mouse over the grey areas then nothing happens - your mouse pointer won't change. Hold your mouse over a shape, however, and the mouse pointer changes to indicate that it's a link. This is all done with the USEMAP attribute. The HTML code with a USEMAP attribute looks like this:

<IMG SRC="images/shapes.gif" USEMAP="#shapes_1">

After the attribute USEMAP comes an equal sign, then the name of your map, preceded by a hash/pound symbol. The name of the map can be anything you like.

Once you have a map name, you need a map to go with it. Take a look at this code, which is the map for our shapes image above:

<MAP NAME="shapes_1">

<AREA SHAPE="Rect" coords="37, 25, 137, 72" href="#">
<AREA SHAPE="Circle" coords="205 49, 29" href="#">
<AREA SHAPE="Poly" coords="317, 23, 349, 76, 284, 76" href="#">

</MAP>

So you have two MAP tags, a start and an end one. The first MAP tag takes a NAME attribute. This is the USEMAP name from your IMG code. In between the two MAP tags you need at least one AREA tag. The AREA tag takes attributes of its own: SHAPE, COORDS, and HREF. The shapes you can have are RECT (short for rectangle), CIRCLE, and POLY (short for polygon). Each shape needs some coordinates (the COORDS attribute). For any rectangular area of your image you need the coordinates of the top left corner in pixels. Ours was 37 and 25. This means 37 pixels from the left edge of the image itself (the X direction), and 25 pixels down from the top of your image (the Y direction). The bottom right of our rectangle was 137 pixels in the X direction and 72 in the Y direction.

For a circle, you need the X and Y values for the centre of your circle. You measure from the left of the whole image, not the left edge of the circle. For the Y direction, you measure from the top of your image. The third coordinate you need for a circle is the radius (half the diameter).

For a Polygon, you need X and Y coordinates for each point. Our polygon is a triangle, so has an X and Y value for each of the three points.

The HREF attribute is the web page a visitor is taken to when an area on the map is clicked. We've typed a # symbol. This means "don't go anywhere - stay on the same page".