<area>

Description

L’élément <area> définit une zone interactive à l’intérieur d’une carte d’image (<map>). Chaque <area> représente une région cliquable sur l’image associée : un rectangle, un cercle ou un polygone. Il est toujours imbriqué dans un <map> et agit comme un lien vers une URL ou une ancre.

Syntaxe

<map name="exemple">
  <area shape="rect" coords="0,0,100,50" href="/page" alt="Description">
</map>

Exemples

Zone rectangulaire :

<area shape="rect" coords="10,10,190,90" href="/produit-a" alt="Produit A">

Zone circulaire (cx, cy, rayon) :

<area shape="circle" coords="100,100,50" href="/planete-mars" alt="Mars">

Zone polygonale :

<area shape="poly" coords="50,0,100,80,0,80" href="/triangle-region" alt="Région triangulaire">

Zone sans lien (zone inactive) :

<area shape="rect" coords="200,200,300,250" alt="">

Attributs spécifiques

Attribut	Type	Description
shape	enum	Forme de la zone : rect (rectangle), circle (cercle), poly (polygone), default (toute la surface restante).
coords	string	Coordonnées en pixels selon la shape : x1,y1,x2,y2 pour rect ; cx,cy,r pour circle ; x1,y1,x2,y2,… pour poly.
href	URL	URL de destination au clic. Sans cet attribut, la zone est inactive.
alt	string	Texte alternatif obligatoire si href est présent. Chaîne vide si la zone est purement décorative.
target	string	Contexte de navigation : _self, _blank, _parent, _top.
rel	string	Relation avec la ressource liée (comme sur <a>).
download	string	Déclenche le téléchargement du fichier lié au lieu de naviguer.

Notes

Accessibilité : l’attribut alt est requis sur chaque <area> ayant un href. Il doit décrire la destination ou la zone de manière compréhensible hors contexte visuel.

Coordonnées et responsive : les coordonnées sont absolues en pixels et ne s’adaptent pas au redimensionnement de l’image. Pour des cartes responsive, envisager du SVG inline.

shape="default" : couvre toute la zone de l’image non couverte par d’autres <area>. Utile pour définir une action par défaut.