[DRAFT] Image maps

A client-side image map is an image divided into selectable regions defined by <area> elements ("hotspots") that carry out actions, such as provide links to other pages. In this case, text alternatives are needed on 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.

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 each linked <area> has a text alternative to identify the director, such as "Davy Jones: Chairman".

Code snippet

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 in the same proportion as the image. To overcome this you could provide redundant text links on the same page.