English

<map>

Découper une image en zones cliquables, la technique que SVG a rendue obsolète

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique

<map> + <area> — La carte image

La balise <map> définit une carte image : des zones cliquables superposées à un <img>. Chaque <area> décrit une zone (rectangle, cercle, polygone) avec ses coordonnées en pixels et sa destination. C'est une technologie des années 90 qui fonctionne encore, mais que SVG remplace dans presque tous les cas.

Quand l'utiliser

Tu as une image avec des régions distinctes qui doivent mener vers des pages différentes : une carte géographique, un plan de salle, un schéma technique. Avant d'utiliser <map>, demande-toi si un SVG inline avec des <a> ne ferait pas le travail avec plus de souplesse : les coordonnées SVG sont relatives, les zones sont stylisables en CSS, et le résultat est responsive.

Ce que tu gagnes

Accessibilité : chaque <area> doit avoir un alt descriptif. Les lecteurs d'écran listent les zones comme des liens. Mais les coordonnées en pixels ne s'adaptent pas au zoom ni au redimensionnement, un vrai problème à 400 % de zoom.

Exemple de code

<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>

Pour aller plus loin