Attribut coords en HTML

L'attribut HTML coords définit les coordonnées d'une zone cliquable (un « point chaud ») dans une image-map côté client. Il s'utilise sur l'élément <area>, à l'intérieur d'un <map>.

La valeur de coords n'a aucun sens seule — elle est toujours interprétée en fonction de l'attribut shape du même élément <area>. Les mêmes chiffres signifient des choses différentes selon qu'il s'agit d'un rectangle, d'un cercle ou d'un polygone ; coords et shape doivent donc toujours être définis ensemble.

Fonctionnement du système de coordonnées

Les coordonnées sont mesurées en pixels CSS, relativement à l'image rendue :

L'origine 0,0 se situe au coin supérieur gauche de l'image.
x augmente vers la droite, y augmente vers le bas.
Le coin inférieur droit de l'image se trouve à width,height — ainsi, pour une image de 250×150, la coordonnée maximale valide est approximativement 250,150.

Les coordonnées étant liées à la taille rendue, une image-map n'est précise qu'à la taille pour laquelle les coordonnées ont été mesurées. Si vous redimensionnez l'image avec CSS (une width/height différente, une mise en page responsive ou un zoom), les points chauds ne correspondent plus à l'image. Les image-maps fonctionnent donc mieux sur une image de taille fixe.

Valeurs

Le format de coords dépend entièrement de shape :

Valeur de `shape`	Format de `coords`	Signification
`rect`	`x1,y1,x2,y2`	Coin supérieur gauche `(x1, y1)` et coin inférieur droit `(x2, y2)`. Vous devez avoir `x1 < x2` et `y1 < y2`.
`circle`	`x,y,radius`	Centre `(x, y)` et le `radius` en pixels.
`poly`	`x1,y1,x2,y2,...,xn,yn`	Une liste de points d'angle. Le navigateur ferme automatiquement la forme en reliant le dernier point au premier.
`default`	(aucun)	Toute l'image. `default` est une valeur de `shape`, pas de `coords` — un `<area shape="default">` ne prend pas de `coords`.

Une erreur courante consiste à donner les coins dans le mauvais ordre pour rect. coords="90,90,35,55" est invalide car x1 > x2 et y1 > y2 ; écrit correctement, ce rectangle s'écrit coords="35,55,90,90".

Syntaxe

<area shape="rect" coords="x1,y1,x2,y2">

Exemples de l'attribut coords en HTML

L'exemple ci-dessous utilise un rect, deux circles et un poly sur la même image :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <!-- circle: center x,y and radius -->
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="195,32,28" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <!-- rect: top-left x1,y1 then bottom-right x2,y2 (x1<x2, y1<y2) -->
      <area shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
      <!-- poly: a triangle joining three points -->
      <area shape="poly" coords="150,80,230,80,190,140" alt="js" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>

Essayez vous-même »

Remarque : Donnez toujours à chaque <area> une valeur alt explicite — c'est le seul texte qu'un lecteur d'écran possède pour ce point chaud.

Note sur l'accessibilité

Les image-maps côté client sont une technique héritée qui comporte de véritables limitations. Les points chauds ne sont pas toujours accessibles au clavier de manière fiable, leur signification dépend d'un alt précis pour chaque <area>, et les coordonnées deviennent incorrectes dès que l'image est redimensionnée ou affichée à une échelle différente. Pour la plupart des interfaces modernes, il est préférable de disposer des liens ou boutons individuels, focalisables et mis en forme, par-dessus (ou à côté de) l'image, qui restent accessibles et responsives. Utilisez coords et les image-maps uniquement lorsque vous avez réellement besoin de régions cliquables irrégulières sur une seule image raster de taille fixe.

Attributs et balises associés

<map> — définit l'image-map qui regroupe les éléments <area>.
<area> — l'élément sur lequel coords est défini.
Attribut alt — le texte accessible pour chaque zone.

Exercice

Pratique

Quelle est la fonction de l'attribut 'coords' en HTML et comment est-il utilisé ?

L'attribut 'coords' en HTML est utilisé pour définir les coordonnées de la zone cliquable dans une image-map côté client.L'attribut 'coords' en HTML détermine la couleur d'un élément.Il s'utilise avec la balise 'area' et la valeur de l'attribut 'coords' dépend de l'attribut 'shape'.L'attribut 'coords' fonctionne de manière indépendante et ne dépend pas de l'attribut 'shape'.Le format de la valeur 'coords' dépend de 'shape' : 'rect' utilise x1,y1,x2,y2, 'circle' utilise x,y,radius, et 'poly' utilise une liste de points.'circle', 'rect', 'poly' et 'default' sont toutes des valeurs valides de l'attribut 'coords'.