Attribut shape de HTML <area>
Définition et utilisation
shape
détermine la forme de la zone.
shape
L'attribut Attribut coords Utilisés ensemble pour définir la taille, la forme et la position de la zone.
Exemple
Utilisez l'attribut shape pour spécifier la forme de chaque zone dans la carte d'image :
<map name="planetmap"> <area shape="rect" coords="0,0,114,576" href="sun.html" alt="Soleil"> <area shape="circle" coords="190,230,5" href="mercur.html" alt="Mercure"> <area shape="circle" coords="228,230,5" href="venus.html" alt="Vénus"> </map>
Syntaxe
<area shape="default|rect|circle|poly">
Valeur de l'attribut
Valeur | Description |
---|---|
default | Définir l'ensemble de la zone. |
rect | Définir une zone rectangulaire. |
circle | Définir une zone circulaire. |
poly | Définir une zone polygonale. |
Explication détaillée :
shape
L'attribut est utilisé pour définir la forme de la zone sensible au curseur dans la carte d'image:
- Cercle (circ ou circle)
- Polygone (poly ou polygon)
- Rectangle (rect ou rectangle)
shape
La valeur de l'attribut affecte l'interprétation du navigateur par rapport à l'attribut coords. Si l'utilisation shape
Si la propriété n'est pas spécifiée, le navigateur suppose que la valeur utilisée est "default". Selon la norme, "default" signifie que la zone couvre l'image entière. Dans la pratique, les navigateurs utilisent par défaut une zone rectangulaire et s'attendent à trouver 4 valeurs coords. Si la forme n'est pas spécifiée et que les 4 coordonnées ne sont pas incluses dans l'étiquette, le navigateur ignore la zone entière.
reconnaissable shape
Les navigateurs qui peuvent fournir une zone incluant toutes les zones chaudes, pour les cas où un clic est effectué au-delà de la portée définie par d'autres zones chaudes. Comme les zones dans la balise <map> sont utilisées dans un ordre "premier arrivé, premier servi", toutes les zones par défaut doivent être placées à la fin. Sinon, la zone par défaut couvrira toutes les autres zones qui apparaissent dans d'autres images de carte.
Les navigateurs n'ont pas de exigences strictes concernant la mise en œuvre des noms de formes. Par exemple, pour le rectangle, Netscape 4 ne reconnaît pas "rectangle", mais il reconnaît "rect". Pour cette raison, nous recommandons d'utiliser des noms abrégés.
Compatibilité des navigateurs
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Support | Support | Support | Support | Support |