L'élémentHTML<area> définit une zone à l'intérieur d'une image qui possède des zones cliquables prédéfinies. Uneimage permet d'associer des zones géométriques d'une image à desliens hypertextes.

Cet élément est utilisé uniquement à l'intérieur d'un élément<map>.

Exemple interactif

<map name="infographic">  <area    shape="poly"    coords="129,0,260,95,129,138"    href="https://developer.mozilla.org/docs/Web/HTTP"    alt="HTTP" />  <area    shape="poly"    coords="260,96,209,249,130,138"    href="https://developer.mozilla.org/docs/Web/HTML"    alt="HTML" />  <area    shape="poly"    coords="209,249,49,249,130,139"    href="https://developer.mozilla.org/docs/Web/JavaScript"    alt="JavaScript" />  <area    shape="poly"    coords="48,249,0,96,129,138"    href="https://developer.mozilla.org/docs/Web/API"    alt="Web APIs" />  <area    shape="poly"    coords="0,95,128,0,128,137"    href="https://developer.mozilla.org/docs/Web/CSS"    alt="CSS" /></map><img  usemap="#infographic"  src="/shared-assets/images/examples/mdn-info.png"  alt="MDN infographic" />

img {  display: block;  margin: 0 auto;  width: 260px;  height: 260px;}

Attributs

Les attributs de cet élément incluent lesattributs universels.

alt

Une chaîne de caractères alternative à afficher sur les navigateurs qui n'affichent pas les images.Le texte doit être formulé de sorte qu'il présente à l'utilisateur·ice le même type de choix que l'image lorsqu'elle est affichée sans le texte alternatif.Cet attribut est requis uniquement si l'attributhref est utilisé.

coords

L'attributcoords détaille les coordonnées de l'attributshape en taille, forme et placement d'un élément<area>.Cet attribut ne doit pas être utilisé sishape est défini surdefault.

• rect : la valeur estx1,y1,x2,y2.La valeur définit les coordonnées du coin supérieur gauche et du coin inférieur droit du rectangle.Par exemple, dans<area shape="rect" coords="0,0,253,27" href="#" alt="Mozilla">, les coordonnées sont0,0 et253,27, indiquant le coin supérieur gauche et le coin inférieur droit du rectangle, respectivement.
• circle : la valeur estx,y,radius. La valeur définit les coordonnées du centre du cercle et le rayon.Par exemple :<area shape="circle" coords="130,136,60" href="#" alt="MDN">.
• poly : la valeur estx1,y1,x2,y2,..,xn,yn. La valeur définit les coordonnées des bords du polygone.Si la première et la dernière paire de coordonnées ne sont pas les mêmes, le navigateur ajoutera la dernière paire de coordonnées pour fermer le polygone.

Les valeurs sont des nombres de pixels CSS. Notregénérateur de formes peut vous aider à générer la syntaxecoords en sélectionnant des points sur une image que vous téléchargez.

download

Cet attribut, s'il est présent, indique que la ressource liée est destinée à être téléchargée plutôt qu'affichée dans le navigateur.Voir l'élément HTML<a> pour une description complète de l'attributdownload.

href

La cible du lien hypertexte pour la zone.Sa valeur est une URL valide.Cet attribut peut être omis ; dans ce cas, l'élément<area> ne représente pas un lien hypertexte.

interestforExpérimentalNon standard

Définit l'élément<area> comme uninvocateur d'intérêt (interest invoker). Sa valeur est l'id de l'élément cible, qui sera affecté d'une manière ou d'une autre (généralement affiché ou masqué) lorsque l'intérêt est montré ou perdu sur l'élément invocateur (par exemple au survol/fin de survol ou à la sélection/perte de sélection). VoirUtilisation des invocateurs d'intérêt pour plus de détails et d'exemples.

ping

Contient une liste d'URL séparées par des espaces vers lesquelles, lors du suivi du lien, des requêtesPOST avec le corpsPING seront envoyées par le navigateur (en arrière-plan).Généralement utilisé pour le pistage.

referrerpolicy

Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource :

• no-referrer : L'en-têteReferer ne sera pas envoyé.
• no-referrer-when-downgrade : L'en-têteReferer ne sera pas envoyé vers desorigines sansTLS (HTTPS).
• origin : Le référent envoyé sera limité à l'origine de la page référente : sonschéma,host, etport.
• origin-when-cross-origin : Le référent envoyé vers d'autres origines sera limité au schéma, à l'hôte et au port. Les navigations sur la même origine incluront toujours le chemin.
• same-origin : Un référent sera envoyé pour lamême origine, mais les requêtes inter-origines ne contiendront aucune information de référent.
• strict-origin : N'envoie l'origine du document comme référent que lorsque le niveau de sécurité du protocole reste le même (HTTPS→HTTPS), mais ne l'envoie pas vers une destination moins sécurisée (HTTPS→HTTP).
• strict-origin-when-cross-origin (par défaut) : Envoie une URL complète lors d'une requête même origine, n'envoie que l'origine lorsque le niveau de sécurité du protocole reste le même (HTTPS→HTTPS), et n'envoie aucun en-tête vers une destination moins sécurisée (HTTPS→HTTP).
• unsafe-url : Le référent envoyé inclura l'origine et le chemin (mais pas lefragment, lemot de passe ou lenom d'utilisateur·ice).Cette valeur n'est pas sûre, car elle divulgue des origines et des chemins de ressources protégées par TLS vers des origines non sécurisées.

rel

Pour les ancres contenant l'attributhref, cet attribut définit la relation de l'objet cible à l'objet du lien.La valeur est une liste de types de liens séparés par des espaces.Les valeurs et leur signification seront enregistrées par une autorité qui pourrait avoir une signification pour l'auteur·ice du document.La relation par défaut, si aucune autre n'est donnée, est vide. Utilisez cet attribut uniquement si l'attributhref est présent.

shape

La forme de la zone associée. Les spécifications HTML définissent les valeursrect, qui définit une région rectangulaire ;circle, qui définit une région circulaire ;poly, qui définit un polygone ; etdefault, qui indique toute la région au-delà des formes définies.

target

Un mot-clé ou un nom défini par l'auteur·ice ducontexte de navigation pour afficher la ressource liée.Les mots-clés suivants ont des significations particulières :

• _self (valeur par défaut) : Affiche la ressource dans le contexte de navigation actuel.
• _blank : Affiche la ressource dans un nouveau contexte de navigation sans nom.
• _parent : Affiche la ressource dans le contexte de navigation parent du contexte actuel, si la page courante est incluse dans un cadre.S'il n'y a pas de parent, agit comme_self.
• _top : Affiche la ressource dans le contexte de navigation le plus haut niveau (c'est-à-dire l'ancêtre du contexte actuel qui n'a pas de parent).S'il n'y a pas de parent, agit comme_self.

Utilisez cet attribut uniquement si l'attributhref est présent.

Note :Définirtarget="_blank" sur les éléments<area> fournit implicitement le même comportementrel que la définition derel="noopener" qui ne définit paswindow.opener. Voir lacompatibilité des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Image avec zones cliquables

<map name="primary">  <area    shape="circle"    coords="75,75,75"    href="left.html"    alt="Aller à gauche" />  <area    shape="circle"    coords="275,75,75"    href="right.html"    alt="Aller à droite" /></map><img  usemap="#primary"  src="https://dummyimage.com/350x150"  alt="Image 350 x 150" />

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs