Image Map
An image map associates several destinations with regions of one image. It can describe a simple floor plan, but it requires careful keyboard alternatives and size handling.
How it works
- Connect img usemap="#room-map" to map name="room-map". Each area defines a shape, coordinates, destination, and text alternative.
- Rectangle coordinates describe left, top, right, and bottom positions in the image coordinate space. Other supported shapes include circle and poly.
- Provide ordinary text links as an alternative. If the displayed image size changes, coordinate-based regions can become difficult to maintain or target accurately.
A practical example
<img src="rooms.png" alt="Workshop room plan"
width="400" height="200" usemap="#room-map">
<map name="room-map">
<area shape="rect" coords="10,10,190,190"
href="studio.html" alt="Studio information">
</map>
<p><a href="studio.html">Studio information</a></p>
In a local page with the supplied image, the rectangular area links to studio.html. The ordinary text link offers the same destination without requiring the reader to interact with the picture.