An imagemap is a large image with clickable link hotspots used for the purpose of site navigation or other UI purposes. An 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 geolocation services, 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 imagemap, 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 often fail if you are trying to determine country of origin (Lichtenstein).
2. Because imagemaps depend on the presence of a large image, they can be slow to load if unless they are coupled with srcset.
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, I’ll use DreamWeaver).
6. Traditional imagemaps are not responsive.

Make an imagemap

First, find an appropriate image. Let’s say we have a company that only distributes products in Alberta, with 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 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 imagemap HTML, and is distinct from the alt and id attributes 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.

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:

<map name="albertalocations" id="albertalocations">
	<area shape="rect" coords="136,361,219,389" href="calgary.html" alt="Calgary">
</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. As a final check, 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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.