An imagemap is a large image with clickable link hotspots, used as navigation for a website. A fairly old and well-established technique, imagemaps are particularly useful in the following cases:

1. If your site audience is pre- or post-literate, or is not likely to understand the language used on the website. Young children, for instance, tend to navigate via images rather than text.

2. When the navigation is complex, but can be presented in a visually compelling way. Geographical maps are a good example. (This has to some extent been made redundant by geo-location tools, particularly those featured in HTML5, but is still useful for older browsers or to indicate alternate decisions).

Imagemaps do have several drawbacks:

1. Very small details tend to get lost in an image map, lowering visitor response time and occasionally obscuring answers. A geographical image map works well if you are trying to determine where the user is from in the world (North and South America, Western Europe, Asia, etc), but fail if you are trying to determine country of origin (Lichtenstein).

2. Because image maps depend on the presence of a large image, they can be slow to load, making them inappropriate for low-bandwidth users.

3. Realistically, image maps can only be used once on a website, typically on the front page: they take up too much room to be used on every page.

4. Imagemaps are not accessible for users with low visual acuity. For this reason, you should always have an accessible backup navigation system (plain-text links, a drop-down menu in a form) on the same page on which an image map is present.

5. Imagemaps cannot easily be coded by hand: it’s a lot easier to use a design tool (for this example, we’ll use DreamWeaver).

Make an image map

First, find an appropriate image. Let’s say we have a company that only distributes products in Alberta, and has several distribution outlets in the province: Calgary, Edmonton, Grand Prairie and Fort Vermilion. We want a visitor to our site to choose the location nearest them.

Optimize your image as normal and bring it into DreamWeaver. Bring up the Properties bar. Make sure the image is selected.

You should name your image in the property bar: this a reference for the image map HTML, and is distinct from the title, alt, and id of an image.

There are several hotspot creation tools we can use in the bottom left corner of the Properties bar: rectangle, ellipse, and irregular polygon. In this case, as the user may click on the location or the name when using the image map, we will use a rectangular hotspot tool around each area.

Using the rectangular hotspot tool, draw an appropriate sized box around a location. Immediately after you let go of the mouse, DreamWeaver will prompt you to enter alt information for the hotspot, so that, in theory, visually impaired users can read the location.

When you are complete, return to Code view in DreamWeaver. You can see why we don’t try to hand-code image maps. The code will look something like this:

1. <map name="albertalocations" id=albertalocations">
2. <area shape="rect" coords="136,361,219,389" href="calgary.html" alt="Calgary" />
3. </map>

The image map coordinate system is difficult to write, especially for hotspots that are irregular polygons, so using a WYSIWYG system like DreamWeaver is best.

View the completed page in a browser. Note that tooltips do not pop up over each location on the image map, due to the fact that DreamWeaver has forgotten to put in title attributes and values for each area, just as it does for regular images. Return to code view and correct this. You might also want to turn off the border on the image.

Finally, force the image not to load by changing the filename referenced in the code. Reload the page: you can see why even with the attributes we have added, imagemaps are not well-regarded in terms of accessibility.