La balise HTML map - Apprendre HTML

La balise HTML <map> définit une image interactive côté client — une image dont différentes régions renvoient vers différentes destinations. Au lieu d'un seul lien pour toute l'image, vous balisez plusieurs « zones cliquables » sur celle-ci. Chaque zone est décrite par un élément <area>, et tous les éléments <area> se trouvent à l'intérieur d'un seul <map>.

On l'appelle image interactive côté client car le navigateur gère localement toute l'interprétation et le rendu des régions — aucun aller-retour vers le serveur n'est nécessaire pour déterminer quelle région a été cliquée.

Cette page explique comment un <map> est relié à son image, comment définir les régions cliquables avec <area>, les exigences d'accessibilité, et quand une image interactive est (ou n'est pas) l'outil approprié.

Comment `<map>` se connecte à une image

Un <map> ne fait rien seul. Il doit être référencé par une image via deux attributs qui doivent correspondre :

Sur le <map> : l'attribut name, par exemple <map name="planets">.
Sur le <img> : l'attribut usemap, qui pointe vers ce nom avec un # initial, par exemple <img usemap="#planets">.

<img src="planets.png" alt="The planets" usemap="#planets" />

<map name="planets">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html" />
</map>

Règles de liaison à garder à l'esprit :

Le préfixe # est requis uniquement sur usemap. La valeur de name s'écrit sans le # ; la valeur de usemap s'écrit avec (c'est une référence de fragment). name="planets" ↔ usemap="#planets".
Les valeurs sont sensibles à la casse. usemap="#Planets" ne correspondra pas à name="planets".
Le name doit être unique dans le document et ne doit pas être vide.
Les éléments <area> doivent être à l'intérieur de <map>. Un <area> placé ailleurs n'a aucun effet.

Si les noms ne correspondent pas exactement, l'image s'affiche simplement sans régions cliquables et sans message d'erreur — un bug silencieux courant.

Définir les régions cliquables avec `<area>`

Chaque région est un élément <area>. Deux attributs décrivent sa géométrie, et les autres décrivent le lien :

Attribut	Rôle
`shape`	Type de région : `rect`, `circle`, `poly`, ou `default`.
`coords`	Coordonnées définissant la région, en pixels CSS.
`href`	URL de destination de la région.
`alt`	Texte alternatif pour la région (obligatoire quand `href` est présent).
`target`	Où ouvrir le lien (`_blank`, `_self`, etc.).

La signification de coords dépend de shape :

Forme	Format de `coords`	Signification
`rect`	`x1,y1,x2,y2`	Coins supérieur gauche et inférieur droit d'un rectangle.
`circle`	`x,y,r`	Point central `x,y` et rayon `r`.
`poly`	`x1,y1,x2,y2,x3,y3,…`	Une liste de points formant un polygone (chaque paire est un sommet).
`default`	(aucun)	La totalité de l'image non couverte par une autre zone.

Toutes les coordonnées sont mesurées depuis le coin supérieur gauche de l'image (0,0), en pixels, par rapport à la taille intrinsèque de l'image.

<map name="shapesmap">
  <!-- rectangle from (0,0) to (60,60) -->
  <area shape="rect" coords="0,0,60,60" alt="Square region" href="square.html" />
  <!-- circle centered at (120,30) with radius 25 -->
  <area shape="circle" coords="120,30,25" alt="Round region" href="circle.html" />
  <!-- triangle through three points -->
  <area shape="poly" coords="160,0,200,60,120,60" alt="Triangle region" href="triangle.html" />
</map>

Syntaxe

La balise <map> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<map>) et fermante (</map>).

Exemple de la balise HTML `<map>` :

Balise HTML <map>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo items to watch it closer:</p>
    <img src="/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png"  width="145" height="126" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="45,58,30" alt="html-book" href="https://www.w3docs.com/learn-html.html" />
      <area shape="circle" coords="88,64,15" alt="html-quiz" href="https://www.w3docs.com/quiz-start/html-basic" />
      <area shape="circle" coords="114,67,14" alt="html-snippets" href="https://www.w3docs.com/snippets/html.html" />
    </map>
  </body>
</html>

Essayez vous-même »

Attributs

Attributs	Valeur	Description
name	mapname	Définit le nom d'une image interactive.

L'élément <map> utilise également les Attributs globaux.

Accessibilité

Les images interactives sont entièrement visuelles à moins que vous ne les rendiez autrement, c'est pourquoi quelques règles sont importantes :

Chaque <area> lié doit avoir un alt significatif. Les lecteurs d'écran annoncent chaque zone par son texte alt, exactement comme ils le font pour les liens. Un alt vide ou manquant sur une zone cliquable laisse le lien sans étiquette.
Faites en sorte que l'alt décrive la destination, pas l'image. « Ouvrir la page de contact » est plus utile que « cercle bleu ».
La navigation au clavier fonctionne automatiquement pour les zones qui ont un href : chacune devient un lien focalisable et accessible par tabulation. Évitez de placer de l'interactivité uniquement dans une région sans href, car elle ne sera pas accessible au clavier.
N'utilisez pas de minuscules zones cliquables. Les régions petites ou de forme irrégulière sont difficiles à cibler avec une souris, un écran tactile ou un pointeur assistif.

Quand utiliser (et quand ne pas utiliser)

Les images interactives côté client sont une ancienne fonctionnalité qui fonctionne encore, mais elles ne conviennent qu'à un ensemble restreint de cas aujourd'hui.

Utilisation raisonnable : une seule image matricielle (une photo, un diagramme, un plan d'étage scanné) où quelques régions rectangulaires ou circulaires doivent être liées, et l'image ne sera pas redimensionnée de manière responsive.

Évitez <map> lorsque :

La mise en page est responsive. Les coords sont des valeurs en pixels fixes liées à la taille intrinsèque de l'image ; elles ne s'adaptent pas lorsque l'image est redimensionnée avec CSS, de sorte que les zones cliquables se décalent.
Les régions sont des boutons, des menus ou quoi que ce soit de complexe. Construisez-les plutôt avec du vrai HTML/CSS.

Pour la plupart des besoins modernes, il existe de meilleures alternatives :

Ancres superposées avec CSS — placez des éléments <a> positionnés de manière absolue (en pourcentages) sur une image responsive. Cela se redimensionne correctement et est entièrement accessible.
<svg> inline — dessinez des formes comme de véritables éléments scalables et stylables, et enveloppez chaque forme cliquable dans un <a>. C'est l'option la plus flexible pour les diagrammes et les régions complexes.

Voir aussi Liens HTML pour comprendre le comportement des ancres et des cibles de liens.

Pratique

Qu'est-ce qui est vrai à propos de la balise HTML <map> telle que décrite sur la page web liée ?

La balise HTML <map> est utilisée pour créer une image interactive.La balise <map> n'est pas prise en charge en HTML5.La balise <map> définit une image interactive côté client. Une image interactive est une image avec des zones cliquables.La balise <map> ne peut pas être utilisée avec des éléments <area> pour définir les zones cliquables dans l'image interactive.L'élément <map> ne contient pas un ou plusieurs éléments <area> qui définissent les zones cliquables dans l'image interactive.

Comment <map> se connecte à une image

Définir les régions cliquables avec <area>