Building Websites - HTML Manual of Style - page 235

To create an imagemap, use a map element containing one or more area ele-
ments. For example:

<map name="east-wall">
<area shape="rect" coords="80,120,200,280"
href="http://en.wikipedia.org/wiki/Starry_Night"
alt="Starry Night, Vincent Van Gogh"/>

<area shape="rect" coords="240,120,400,300"
href="http://en.wikipedia.org/wiki/Waterlilies"
alt="Water Lilies, Claude Monet"/>

<area shape="rect" coords="450,120,574,280"
href="http://en.wikipedia.org/wiki/The_Bathers_(Cézanne)"
alt="The Bathers, Paul C&eacute;zanne"/>
</map>

he map element can be placed anywhere in the body of the page. It has
no displayable content and efectively exists outside the content low. he
coords attributes deine the x- and y-coordinates, in pixels, of the top-let and
bottom-right corners of each subarea with respect to the top-let corner of the
image. Area coordinates can overlap, in which case the irst area element that
includes the user's click (or inger tap) is the one taken. To use the map, add a
usemap attribute to the image element with the map's name:

<img src="images/art-museum-wall.jpg"
alt="Pictures at an exhibition"
usemap="#east-wall"/>

Imagemaps were very popular when irst introduced, because they let
designers create graphically interesting navigation controls. hey fell out of
use as designers switched to text styled with CSS, but they may see increasing
use again as more location-aware mobile applications are deployed for touch-
sensitive devices. Imagemaps do have a few disadvantages:

hey are diicult to manage. Both the image and its map must be edited
in tandem, usually with diferent tools.

.

hey provide less information to robots that can't discern the context in
which the links appear.

.

Area shapes other than rectangles do not have good cross-browser
support.

.