Image Maps

Example 1: An organizational chart with links to individual pages

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”. The text alternative for individuals also states their relation in the graph.

Code

<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">
  […]
  <area shape="rect"
        coords="6,138,155,182"
        href="[…]"
        alt="Harry H Brown: Marketing Director (reports to chairman)">
  […]
</map>

Full code for Image map example

Browser implementation for image maps varies at the time of writing; see this HTML bug. To accommodate for the different implementations, keep in mind to:

use every image map only once. That means if multiple images with the same map are to be used, the map should be duplicated and have a different ids;
place the <map> element as a direct sibling to the image.