La balise <area> est utilisée en combinaison avec la balise <map> pour définir des zones cliquables dans une image interactive, souvent appelée "image map".
Chaque balise <area> correspond à une région spécifique de l’image et permet de transformer ces zones en liens cliquables vers des URLs ou des actions spécifiques.
Elle est particulièrement utile pour créer des interfaces visuelles interactives ou pour des cartes géographiques, des diagrammes et des images avec plusieurs points d'intérêt.
Vous vous souvenez de la carte de LeBonCoin ? C'était une zone cliquable qui utilisait des balises <area> !
Structure et syntaxe de la balise <area>
Syntaxe
La balise <area> s'utilise, comme nous l'avons vu, en coordination avec une balise <map>.
Elle est toujours structurée de cette manière :
<area shape="[FORME]" coords="[COORDONNEES]" href="[URL]" alt="[DESCRIPTION]" />
Exemple d'utilisation
Prenons un exemple "simple 🙄" d'une zone avec un rectangle, un cercle et un polygone.
<img src="image-map.jpg" usemap="#example-map" alt="Exemple de carte d'image" />
<map name="example-map">
<area shape="rect" coords="34,44,270,350" href="https://exemple.com/section1" alt="Section 1" />
<area shape="circle" coords="450,150,75" href="https://exemple.com/section2" alt="Section 2" />
<area shape="poly" coords="200,10,250,190,160,210" href="https://exemple.com/section3" alt="Section 3" />
</map>Et de manière plus parlante, avec une démonstration interactive :
Il est souvent difficile de créer manuellement ses "zones", elles sont plus globalement générées avec des logiciels bien précis comme Fla-shop.
Attributs
| Attribut | Description | Valeur possible |
|---|---|---|
shape | Spécifie la forme de la zone cliquable. | rect, circle, poly, ou default. |
coords | Définit les coordonnées de la zone en fonction de la forme spécifiée. | Liste de valeurs numériques séparées par des virgules. |
href | Lien hypertexte vers lequel rediriger lorsque la zone est cliquée. | URL valide. |
alt | Fournit une description textuelle de la zone pour l’accessibilité. | Texte descriptif. |
target | Définit où ouvrir le lien (_self, _blank, _parent, ou _top). | _self (par défaut), _blank, _parent, ou _top. |
download | Permet de télécharger le fichier lié au lieu de rediriger vers l’URL. | Valeur facultative : nom de fichier. |
Compatibilité des navigateurs
La balise <area> est largement supportée par tous les navigateurs modernes et anciens. Cependant :
- N'oubliez pas de l'utiliser avec la balise
<map>pour être fonctionnelle ; - Assurez-vous d’inclure un attribut
altpour une meilleure accessibilité, car ces zones ne sont pas toujours visibles pour les utilisateurs ou les lecteurs d'écran. 😉