Balise HTML <area>
La balise <area> identifie les zones actives (coordonnées, forme, taille, etc.) de la carte image, définie par la balise <map>. Lorsque vous cliquez sur une zone active de l'image, une action spécifique se produit, par exemple, le passage vers une page contenant des informations détaillées.
La balise <area> est toujours placée à l'intérieur de la balise <map>. Les zones actives peuvent se chevaucher, auquel cas la zone qui apparaît plus tard dans l'ordre du DOM est activée lors du clic.
Syntaxe
La balise <area> est vide, ce qui signifie que la balise de fermeture n'est pas requise. Cependant, dans XHTML, la balise <area> doit être fermée (<area />).
Exemple de la balise HTML <area> :
Balise HTML <area>
<!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="https://fr.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap" />
<map name="blockmap">
<area shape="circle" coords="50,32,25" alt="html" href="https://fr.w3docs.com/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="218,115,25" alt="css" href="https://fr.w3docs.com/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<area shape="circle" coords="195,32,28" alt="php" href="https://fr.w3docs.com/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
<area class="homepage" shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
</map>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| alt | texte | Spécifie un texte alternatif pour la zone active. |
| coords | x1,y1,x2,y2 | x,y,radius | x1,y1,...,xn,yn | Spécifie les coordonnées de la zone active. Les valeurs dépendent de la forme : rect (coins supérieur gauche et inférieur droit), circle (centre et rayon), ou poly (sommets du polygone). |
| download | nom_de_fichier | Indique que lors du clic sur une zone spécifique, le fichier doit être téléchargé. |
| href | URL | Spécifie la référence de la transition. |
| hreflang | code_langue | Définit la langue du document référencé. Utilisé uniquement avec href. |
| nohref | (aucun) | Spécifie une zone qui ne contient pas de référence. Non pris en charge dans HTML5. |
| rel | alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tag | Établit un lien entre le document actuel et les documents liés. |
| shape | rect | circle | poly | Définit la forme de la zone. |
| target | _blank | _self | _top | _parent | frame_name | Spécifie comment le document lié doit être ouvert. frame_name n'est pas pris en charge dans HTML5. |
| type | type_média | Spécifie le type MIME du document lié. |
La balise <area> prend également en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quel est l'objectif de la balise HTML area et quels sont ses attributs ?