HTML <map> element

The <map> element defines an image map. An image map lets different regions of one image act as separate clickable areas.

The <map> element does not show the image. The image is still supplied by an <img> element. The connection is made through the image's usemap attribute and the map's name attribute.

Inside the map, <area> elements define the clickable regions. Each area can describe a shape, coordinates, link target, and alternative text.

This is useful when one image carries several meaningful zones. A map of rooms, a labelled diagram, a body diagram, or a historical map might need several parts of the same image to link to different places.

Image maps are older and less common than many modern layout techniques, but they are still real HTML. The hard part is that coordinate-based regions can become awkward when images resize. The author has to make sure the image and its regions still line up.

Used well, <map> turns one image into several meaningful link targets. Used carelessly, it creates invisible click regions that are hard to understand and hard to maintain.

Attributes: name, GLOBALS.

Typical layout:
<img src="floor-plan.png" alt="Floor plan" usemap="#rooms">

<map name="rooms">
  <area shape="rect" coords="0,0,100,80" href="kitchen.html" alt="Kitchen">
  <area shape="rect" coords="100,0,200,80" href="studio.html" alt="Studio">
</map>

Visual representation: