HTML Reference - Client-side Image Maps

HTML Reference

Client-side Image Maps

Image Maps allow hyperlinks to different places from different parts of an image.

There are two types of image maps, "server-side" maps and "client-side" maps. Now that most newer browsers support "client-side" image maps, they should be used in preference to the (older) "server-side" image maps, mainly because they can be implemented much easier. These notes will only explain "client-side" image maps, for information of "server-side" image maps see the "WWW FAQ"

Three shapes are allowed when defining imagemap areas.

Circle
Rectangle
Polygon (up to 100 points)

In addition, it is possible to define a "default" hyperlink that is associated with the parts of the image that are outside the areas defined in the shapes.

The image below has three simple shapes, the coordinates are shown to help understanding, in fact, the shapes do not need to be identifiable or obvious....

The HTML to display the image is almost "standard". The only addition is the "usemap" attribute, which lists the "name" of the section that the browser uses to calculate the active areas.

<img border=0
        src="test.gif" usemap="#maplabel">

        

        <map name="maplabel">

        <area shape="poly" coords="9,160,
        23,122, 86,157, 98,135, 114,166, 92,181, 84,166,
        9,160" href="URL">

        <area shape="circle" coords="66,64,
        42" href="URL">

        <area shape="rect" coords="127,13,
        186,148" href="URL">

        </map>

The text "URL" in the example above means that’s where the URL is placed!

The border=0 is optional - it stops the browser from drawing a hyperlink border around the image, this is sometimes useful but can confuse people looking at the page.

return to the Contents page.
Last Updated: 1 October 1998