La balise <map> permet de définir une carte d'image interactive qui associe des zones cliquables à des liens hypertexte ou des actions spécifiques. En conjonction avec la balise <area>, elle transforme une image en interface dynamique, permettant à des utilisateurs de cliquer sur différentes régions pour naviguer ou interagir.
Elle est couramment utilisée pour des cartes géographiques, des schémas ou des images complexes avec plusieurs points d'intérêt.
Structure et syntaxe de la balise <map>
La balise <map> encapsule plusieurs balises <area> qui décrivent les zones interactives de l'image.
Syntaxe
Voici la syntaxe classique d'une balise <map> :
<map name="[NOM-DE-LA-CARTE]">
<area shape="[FORME]" coords="[COORDONNEES]" href="[URL]" alt="[DESCRIPTION]" />
</map>
Exemple d'utilisation
Prenons un petit exemple simple : une image qui présente cinq de nos formations. Nous avons besoin d'avoir cinq zones cliquables afin de rediriger pour chaque zone sur la bonne formation.
Utiliser une balise <map> avec plusieurs balises <area> est une excellente idée !
Attributs
La balise <map> ne possède qu'un seul attribut qui lui est spécifique (donc à part les classiques attributs comme title qui permet d'afficher une infobulle présentant un petit texte par exemple).
Il s'agit de l'attribut name, qui lui permet d'avoir un nom bien à elle.
Ce nom est utilisé pour relier la balise <map> à la balise <img />. Ainsi nos zones seront superposées sur l'image qui aura le même nom que dans l'attribut name.
Compatibilité des navigateurs
La balise <map> est compatible avec tous les navigateurs modernes et anciens.
| Elément | Google Chrome | Safari | Mozilla Firefox | Edge |
| <map> | Oui | Oui | Oui | Oui |