<map>

Description

L’élément <map> définit une carte d’image (image map) : une image sur laquelle différentes zones sont cliquables et mènent à des destinations différentes. Il est utilisé conjointement avec <img usemap="#nom"> et contient des éléments <area> qui définissent chaque zone interactive.

Syntaxe

<img src="planete.png" alt="Planètes du système solaire" usemap="#planetes">
<map name="planetes">
  <area shape="circle" coords="90,58,30" href="/mercure" alt="Mercure">
  <area shape="circle" coords="200,58,45" href="/venus" alt="Vénus">
</map>

Exemples

Carte géographique interactive :

<img src="france-regions.png" alt="Carte des régions françaises" usemap="#regions" width="600" height="400">
<map name="regions">
  <area shape="poly" coords="120,80,160,80,170,120,110,125" href="/bretagne" alt="Bretagne">
  <area shape="poly" coords="200,150,250,140,260,190,190,195" href="/auvergne" alt="Auvergne">
  <area shape="rect" coords="300,200,400,280" href="/paca" alt="PACA">
</map>

Schéma interactif avec zones rectangulaires :

<img src="schema-ordinateur.png" alt="Composants d'un ordinateur" usemap="#composants">
<map name="composants">
  <area shape="rect" coords="10,10,200,100" href="/cpu" alt="Processeur">
  <area shape="rect" coords="210,10,400,100" href="/ram" alt="Mémoire RAM">
  <area shape="rect" coords="10,110,400,200" href="/carte-mere" alt="Carte mère">
</map>

Attributs spécifiques

Attribut	Type	Description
name	string	Obligatoire. Identifiant de la carte, référencé par usemap="#nom" sur l’élément <img>.

Notes

Accessibilité : chaque <area> doit avoir un attribut alt descriptif. L’image elle-même doit avoir un alt global qui décrit l’ensemble du contenu.

Responsive et image maps : les coordonnées de <area> sont en pixels fixes et ne s’adaptent pas automatiquement quand l’image est redimensionnée. Pour des cartes responsive, envisager SVG inline avec des liens <a> ou des solutions JavaScript.

<map> et <img> : le lien entre l’image et la carte se fait via usemap="#nom" sur <img> et name="nom" sur <map>. Les deux doivent correspondre exactement.