HTMLMapElement : propriété areas

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété en lecture seule areas de l'interface HTMLMapElement retourne une collection d'éléments HTML <area> associés à l'élément <map>.

Dans cet article

Valeur

Un objet HTMLCollection d'éléments HTMLAreaElement.

Exemple

html
<map id="image-map" name="image-map">
  <area shape="circle" coords="50,50,35" href="#left" alt="flèche gauche" />
  <area shape="circle" coords="150,50,35" href="#right" alt="flèche droite" />
</map>
<img
  usemap="#image-map"
  src="left-right-arrow.png"
  alt="image flèche gauche droite" />
<output></output>

output {
  display: block;
}

js
const mapElement = document.getElementById("image-map");
const outputElement = document.querySelector("output");

for (const area of mapElement.areas) {
  area.addEventListener("click", (event) => {
    outputElement.textContent = `Vous avez cliqué sur la zone ${area.alt}.\n\n`;
  });
}

Résultats

Spécifications

Spécification

HTML
# dom-map-areas-dev

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Voir aussi

L'interface HTMLAreaElement
La propriété HTMLImageElement.useMap

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 8 janv. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLMapElement
Propriétés d'instance
1. areas
2. name
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript