roman empire map 117AD

HTML Image Maps

The Beauty of Clickable Maps

Most of you are probably aware of HTML Image Maps. It’s where a standard HTML image has clickable sections that act as hyperlinks.

Here is an example that I whipped up a few years ago (on the homepage):

The code is reproduced below:

<img src="map.png" alt="roman empire map 117AD" usemap="#empire" />
<map name="empire">
<area shape="rect" coords="362,403,431,424" alt="Rome" href="rome.html" />
<area shape="rect" coords="727,626,782,687" alt="Petra" href="petra.html" />
<area shape="rect" coords="831,396,884,445" alt="Armenia" href="armenia.html" />

You might be wondering how to determine the coordinates. For rectangles, you need to provide four coordinates. The horizontal position of the top-left corner, the vertical position (from the top of the image) of the top-left corner, the horizontal position of the bottom-right corner and the vertical position of the bottom-right corner.

Image maps can cause significant accessibility problems (and can be hard work to maintain), so you should restrict their use to places where they are really appropriate, such as (surprise) a map, where clicking on the parts of the map gives information about the relevant area. If you plan to make an image map out of a list of words just to make your navigation prettier, then you are using them for the wrong reason, and you should use a normal list styled with CSS.

Please note that you can also use different shapes as clickable areas besides rectangles (e.g. circles, polygons).