Image Maps

A client-side image map is an image divided into selectable regions defined by <area> elements (“hotspots”) that allow user interaction. Usually the selectable regions are links to other pages. For image maps, text alternatives are needed on both the <img> element itself (to convey the informative context) and on each of the <area> elements (to convey the link destination or the action that will be initiated if the link is followed).

The following organizational chart is used to provide links to each director's home page. The text alternative for the image is “Board of Directors and related staff:”. Each linked <area> has a text alternative to identify the individual – for example, “Davy Jones: Chairman”.

Example:

Board of directors and related staff:

Davy Jones: Chairman Carole Brewster: Company Secretary Harry H Brown: Marketing Director Paula Holbein: Sales Director Hugh Howard: Finance Director
Code snippet: 
<img src="orgchart.png"
     alt="Board of directors and related staff: "
     usemap="#Map">
<map id="Map" name="Map">
	<area shape="rect"
	      coords="176,14,323,58"
	      href="…"
	      alt="Davy Jones: Chairman">
	[…]
</map>

Full code for Image map example

Note: Image maps may not function correctly on some mobile devices if the coordinates for the areas are not scaled using the same proportions as the image. To compensate for this you could provide redundant text links on the same page.

Techniques: