Maps d’image HTML

L’élément Picture choisit parmi des fichiers d’image. Une map d’image (image map) garde une seule image et rend des régions cliquables — des hotspots sur un plan d’étage, un schéma ou un menu graphique simple. Vous associez un img qui a usemap à un <map> rempli de liens <area>.

Ce qu’est une map d’image

Une map d’image n’est pas un format d’image séparé. C’est du HTML qui dit : « ce rectangle (ou cercle, ou polygone) sur l’image doit se comporter comme un lien. » Les utilisateurs voyants cliquent la zone ; les technologies d’assistance ont besoin d’un alt clair sur chaque area, car il peut n’y avoir aucun texte visible à côté du hotspot.

Réponse directe

1. Ajoutez usemap="#mapname" sur l’img.
2. Ajoutez <map name="mapname"> avec un ou plusieurs éléments <area>.
3. Chaque area a besoin de shape, coords, href et de son propre alt.
   Le # sur usemap doit correspondre au name de la map (sans inventer une seconde orthographe).

Valeurs de shape en un coup d’œil

Une map rectangulaire simple

Deux hotspots sur un plan de bureau suffisent pour apprendre le branchement : usemap, name correspondant, et rectangles area avec un alt honnête.

Lire l’exemple

• usemap="#deskmap" sur l’image pointe vers la map nommée deskmap
• Chaque area est un lien : href est la destination, alt nomme le hotspot
• Les coords pour rect sont left, top, right, bottom dans la grille de pixels de l’image
• Le alt de l’image elle-même (« Desk layout ») décrit le graphique entier ; les alt des area nomment les zones

Comment fonctionnent les coordonnées

Les coordonnées se mesurent en pixels CSS de l’image telle qu’elle est disposée pour la map. Si vous fixez width et height sur l’img, gardez vos coords cohérentes avec cette taille d’affichage pendant l’apprentissage. De mauvais nombres produisent des hotspots qui ratent les objets dessinés — un échec silencieux fréquent.

Habitudes d’accessibilité

Chaque area cliquable a besoin d’un alt significatif. Ne laissez pas les hotspots sans nom. Préférez des maps où le rôle de chaque région est évident. Si le design exige un comportement responsive complexe, de nombreuses équipes passent à SVG avec des liens ou à des boutons séparés plutôt qu’à des maps en pixels fragiles.

Quand les maps aident — et quand elles n’aident pas

Les maps aident pour un seul schéma avec quelques régions stables. Elles deviennent gênantes quand l’image s’adapte librement à de nombreux points de rupture, car les coords classiques ne se réécrivent pas automatiquement. Pour des interfaces responsive modernes, envisagez des images liées séparées, une mise en page CSS ou SVG. Pourtant, connaître les maps d’image aide quand vous héritez de pages anciennes ou de démos pédagogiques simples.

circle et poly (note rapide)

circle utilise le centre et le rayon. poly liste des paires de points x,y autour d’une forme libre. Commencez par rect jusqu’à ce que l’association usemap / name soit naturelle, puis expérimentez d’autres formes sur un graphique d’exercice.

Pratiquer dans votre éditeur

1. Utilisez une image large simple avec deux régions évidentes.
2. Créez un map avec deux area rect menant vers deux petites pages d’exercice.
3. Faites correspondre soigneusement usemap="#name" à map name="name" (y compris le #).
4. Cliquez chaque région et confirmez la navigation.
5. Cassez une fois la correspondance des noms, observez les hotspots morts, puis corrigez.
6. Améliorez tout area dont le alt dit seulement « link ».

Erreurs faciles

• usemap / name incohérents (oubli du # sur usemap ou renommage d’un seul côté)
• alt manquant sur chaque area
• Coords qui ne correspondent pas à la taille réelle de l’image ou aux positions des objets
• S’appuyer sur les maps d’image pour des mises en page responsive très fluides sans plan
• Mettre la seule description sur l’img et laisser les area sans libellé

Résumé

• Les maps d’image relient img + usemap + map + area
• Les formes incluent rect, circle et poly
• Chaque area a besoin de href, alt, shape et coords
• Gardez les noms assortis et les coords honnêtes
• Pour des UI responsive complexes, envisagez des alternatives modernes — apprenez quand même les maps pour l’héritage et les schémas simples