Les Image Maps HTML : Zones Cliquables et Coordonnées Graphiques
Une Image Map HTML, également appelée « carte d’image » ou « carte cliquable », est un élément graphique interactif qui permet d'améliorer la convivialité d'un site web. Elle offre la possibilité d'associer plusieurs liens cliquables à une seule image ou vidéo dans un document HTML.
Ces zones interactives peuvent rediriger les utilisateurs vers des sous-pages, des URL internes ou externes, ou encore permettre le téléchargement de fichiers. La définition de ces zones se fait en spécifiant des coordonnées précises, qui sont ensuite liées aux adresses web correspondantes.
Fonctionnement et Création d'une Image Map HTML
La balise HTML <map> est l'outil principal utilisé pour la création des cartes d'image. L'attribut name de cette balise est essentiel pour que l'Image Map puisse être référencée. Ce nom sert de point d'ancrage pour lier et adresser la cible souhaitée au sein du graphique ou de la vidéo.
Pour simplifier le processus, il existe des générateurs d'Image Map HTML qui permettent de créer ces éléments sans avoir à coder manuellement les coordonnées.
Définition des Zones Cliquables avec l'Attribut <area>
L'Image Map peut être intégrée à n'importe quel document HTML une fois que ses zones de référence sont définies. La grande force des Image Maps réside dans leur capacité à lier plusieurs destinations à partir d'une seule image ou vidéo.
Pour définir les zones cliquables individuellement au sein d'une carte, on utilise l'attribut HTML <area>. Il faut au minimum un attribut area pour qu'une Image Map soit fonctionnelle.
Attributs clés de <area>
- shape : Cet attribut permet de définir la forme des zones cliquables. Les valeurs possibles sont :
- rect pour les rectangles
- circle pour les cercles
- poly pour les polygones
- coords : Cet attribut spécifie les coordonnées qui délimitent une zone cliquable.
- Pour un rectangle (shape="rect"), la syntaxe est rect="x1,y1,x2,y2", où (x1,y1) correspondent aux coordonnées du coin supérieur gauche et (x2,y2) au coin inférieur droit.
- Les coordonnées peuvent être des fractions décimales et même négatives, le navigateur les gérant en interne.
- href : Indique l'URL de destination du lien associé à la zone.
- alt : Fournit un texte alternatif pour la zone, important pour l'accessibilité.
Intégration d'une Image Map dans une Page HTML
Une fois l'Image Map créée et ses zones définies, elle peut être intégrée dans un site web à l'aide de la balise HTML <img>, en associant l'attribut usemap à l'attribut name de la balise <map>.
L'exemple suivant illustre comment intégrer une Image Map avec trois zones cliquables définies pour une image de plage : la plage, la mer et le ciel.
<img src="plage.jpg" alt="Image de plage" usemap="#map-plage"><map name="map-plage"> <area shape="rect" coords="0,0,300,200" href="plage.html" alt="Aller à la plage"> <area shape="rect" coords="0,200,300,400" href="mer.html" alt="Aller à la mer"> <area shape="poly" coords="300,100,400,200,300,300" href="ciel.html" alt="Aller au ciel"></map>
CRÉER UNE IMAGE CLIQUABLE PAR ZONE POUR LE WEB !
Considérations sur les Coordonnées et l'Accessibilité
Les coordonnées utilisées dans les Image Maps sont relatives au coin supérieur gauche de l'image, où les valeurs X et Y sont égales à zéro. Le navigateur calcule les positions et dimensions internes à partir de ces points de référence.
Bien que les Image Maps offrent une grande flexibilité, il est important de considérer l'accessibilité. L'utilisation de listes de liens avec des propriétés CSS appropriées peut parfois être une alternative plus accessible, notamment pour des découpages complexes ou lorsque des bordures visuelles autour des zones cliquables sont nécessaires pour une meilleure perception par l'utilisateur.
Placer une bordure autour des zones cliquables pour que le visiteur voie clairement sur quelle case il clique est une préoccupation légitime. Si l'utilisation de la balise <area> pose des difficultés pour cette visualisation, explorer des alternatives comme des listes de liens avec des styles ciblés pourrait être plus judicieux, car cela améliore souvent l'accessibilité globale.
tags: #html #area #detourage #graphique #coordonnee