Français

<map>

Divide an image into clickable zones — the technique SVG made obsolete

— 2 min read

  • HTML
  • accessibility
  • semantics

<map> + <area> — The image map

The <map> element defines an image map: clickable zones overlaid on an <img>. Each <area> describes a zone (rectangle, circle, polygon) with its pixel coordinates and its destination. It is a technology from the 1990s that still works, but that SVG replaces in almost every case.

When to use it

You have an image with distinct regions that should lead to different pages: a geographic map, a seating plan, a technical diagram. Before using <map>, ask yourself whether an inline SVG with <a> elements wouldn't do the job with more flexibility: SVG coordinates are relative, zones are stylable with CSS, and the result is responsive.

What you gain

Accessibility: each <area> must have a descriptive alt. Screen readers list the zones as links. But pixel coordinates do not adapt to zoom or resizing — a real problem at 400% zoom.

Code example

<img src="/images/floor-plan.png"
     alt="Office floor plan"
     usemap="#floor">
 
<map name="floor">
  <area shape="rect" coords="0,0,200,150"
        href="/rooms/meeting" alt="Meeting room">
  <area shape="circle" coords="300,100,50"
        href="/rooms/kitchen" alt="Kitchen">
</map>

Further reading