Setting up a client-side image map

To set up a client-side image map you should add the image map information by using the <map> tag. For example: <map name="map1">. The map can go anywhere in the document.

You can then use the <area> tag and the shape attribute to define the shape and coordinates of the areas you can click in. For example:

<area shape="rect" coords="0, 0, 16, 16" href="sample1.htm">
<area shape="rect" coords="0, 16, 16, 16" href="sample2.htm">

The shape of the area can be a rectangle, a circle or a polygon. The coordinates specify the placement and size of the shape. They are:

The top-left and bottom-right corners for a rectangle
The centre and the radius for a circle
All the corners of a polygon

Paintshop Pro displays the coordinates on the bottom status bar as you move the mouse over the picture or draw with the selection tool; note down the ones you want.

The href is the destination page, just like in a normal <a> tag

At the right place in your document, add the picture. You use the usemap attribute to refer to the map that you set up:

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

In this example, the image map (map1) defines two equal rectangular areas. The area on the left is linked to sample1.htm. The area on the right is linked to sample2.htm.

If two or more shapes overlap, Internet Explorer uses the first shape defined in the <map> tag to determine the destination.

Any number of <area> tags can specify the same destination. This is useful if you want to map a complex shape to a single destination. If a portion of the picture is not within a given shape, clicking in that portion has no effect.

One more thing. It is a good idea to use the alt attribute (like you do with a normal picture) to help out speech-based or text-only browsers.

A few design tips:

Before you start, think carefully whether an image map really is the best way of presenting the information. Generally, image maps can work well on a home page, or at the highest level of a topic. They don't work as well for lower levels of detail, particularly for users who just want a nuts and bolts explanation rather than a fancy picture
As with any picture on your web page, you need think about how long it takes to load your photograph or picture
Make sure that it's obvious the picture has links. If necessary, include a caption saying so
There isn't a limit to the number of links you can have on one picture so you could cram in as many links as the space allows. In practice, it's better to stick to around six to eight links
You can change an image map once you've created it, but this often turns out to be more trouble than it's worth. If you have to make changes, you may find that it's easier to start again