Balise HTML <article>

Définition et utilisation

<area> Balise définissant les zones de la carte interactive (une carte interactive est une image avec des zones cliquables, c'est-à-dire une carte de réponse de partition client).

<area> L'élément est toujours imbriqué dans Balise <map>à l'intérieur.

Remarque :Élément <img> dans Attribut usemap et Élément <map> de Attribut nameAssocié, crée une association entre l'image et la carte.

Veuillez également consulter :

Manuel de référence HTML DOM :Objet Area

Exemple

Exemple 1

Carte interactive avec des zones cliquables :

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Essayer personnellement

Exemple 2

Une autre image de carte interactive avec des zones cliquables :

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Soleil" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercure" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Vénus" href="venus.html">
</map>

Essayer personnellement

Attribut

Attribut Valeur Description
alt Texte Définir le texte alternatif de la zone. Il est obligatoire s'il existe l'attribut href.
coords Valeur des coordonnées Définir les coordonnées de la zone.
download Nom de fichier Définir ce que le fichier cible téléchargera lorsque l'utilisateur cliquera sur le lien hypertexte.
href URL Définir le lien cible de la zone.
hreflang Code de langue Définir la langue de l'URL cible.
media Requête de média Définir le média ou l'appareil optimisé de l'URL cible.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Définir les informations de référence à envoyer avec le lien.
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 Définir la relation entre le document actuel et l'URL cible.
shape
  • default
  • rect
  • circle
  • poly
 Définir la forme de la zone.
target
  • _blank
  • _parent
  • _self
  • _top
  • Nom du cadre
 Définir où ouvrir l'URL cible.
type Type de média Définir le type de média de l'URL cible.

Attributs globaux

<area> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<area> Les balises prennent également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <area> Élément :

area {
  display: none;
{}

Support du navigateur

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