Attribut coords <area> HTML

Balise <area> HTML

Définition et utilisation

Attribut coords Définit les coordonnées des zones dans la carte d'image.

Attribut coords Attribut avec Attribut shape Utilisés ensemble pour spécifier la taille, la forme et la position de la zone.

Astuce :Les coordonnées du coin supérieur gauche de la zone sont 0,0.

Attention :Si les coordonnées d'une balise <area> sont en conflit avec d'autres zones, la première balise <area> apparue sera prioritaire. Le navigateur ignore les coordonnées en dehors des limites de l'image.

Exemple

Utiliser l'attribut coords pour définir les coordonnées de chaque zone dans la carte d'image.

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus">
</map>

Essayez-le vous-même

Syntaxe

<area coords="value">

Valeur de l'attribut

Valeur Description
x1,y1,x2,y2 Définir les coordonnées du coin supérieur gauche et du coin inférieur droit du rectangle (shape="rect").
x,y,radius Définir les coordonnées du centre et le rayon (shape="circle").
x1,y1,x2,y2,...,xn,yn

Définir les coordonnées des côtés du polygone.

Si la première et la dernière paire de coordonnées ne sont pas identiques, le navigateur ajoutera la dernière paire de coordonnées pour fermer le polygone (shape="poly").

Explication détaillée :

L'attribut coords de la balise <area> définit les coordonnées des zones sensibles au curseur dans la carte d'image client. Les nombres des coordonnées et leur signification dépendent de la forme de la zone déterminée par l'attribut shape.

Voici les valeurs appropriées pour chaque forme :

Cercle : shape="circle", coords="x,y,z"

Ici, x et y définissent la position du centre du cercle ("0,0" est la coordonnée supérieure gauche de l'image), r est le rayon du cercle en pixels.

Polygone : shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

Chaque paire de coordonnées "x,y" définit un sommet d'un polygone ("0,0" est la coordonnée supérieure gauche de l'image). Pour définir un triangle, il faut au moins trois paires de coordonnées ; pour un polygone à haute latitude, il faut plus de sommets.

Le polygone se ferme automatiquement, donc il n'est pas nécessaire de répéter la première coordonnée à la fin de la liste pour fermer l'ensemble de la zone.

Rectangle : shape="rectangle", coords="x1,y1,x2,y2"

La première coordonnée est la coordonnée d'un coin de rectangle, et l'autre paire de coordonnées est la coordonnée du coin opposé, "0,0" étant la coordonnée du coin supérieur gauche de l'image. Veuillez noter que définir un rectangle est une méthode simplifiée pour définir un polygone à quatre sommets.

Par exemple, le fragment XHTML suivant, placé dans le quart droit inférieur d'une image de 100x100 pixels, définit une zone sensible au curseur et une zone circulaire au centre de l'image.

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Balise <area> HTML