HTMLMapElement : propriété areas - Les API Web | MDN
Baseline
Widely available
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>.
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
| Specification |
|---|
| HTML # dom-map-areas-dev |
Compatibilité des navigateurs
Voir aussi
- L'interface
HTMLAreaElement - La propriété
HTMLImageElement.useMap