Accueil    HTML    Balise AREA
 



balise area  Balise AREA : Zone d'une carte

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture facultatif (.../> en xhtml) | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <area> est utilisée pour marquer une zone active sur une image. Cette balise s'applique à l'intérieur du tag <map> et définie une zone cliquable sur une image.

L'image utilisée est déclarée de façon standard avec le tag <img>. Il faut associer à son attribut "usemap" la valeur relative à l'attribut "name" de la balise map (précédée du caractère #). L'image sera alors rattachée à la balise map. Elle servira donc de support visuel aux liens qui seront appliqués à travers les balises <area>.

Par exemple l'image suivante référencera la map déclarée derrière grâce à leurs attributs usemap d'une part et name d'autre part :

<img usemap="#ZoneDeLien" src=" ...
<map name="ZoneDeLien"> ...



Propriétés pour la balise area :




Propriétés Définition Valeurs
alt texte alternatif si l'image est indisponible Texte
coords Coordonnées d'une zone de l'image Valeurs
href URL du document cible ouvert lors du clic sur le la zone de l'image URL
nohref Indique que la zone n'a pas d'URL associée nohref
shape détermine la forme de la zone default
rect
circle
poly
target détermine dans quelle fenêtre s'ouvre le lien de la zone cliquée _blank
_parent
_self
_top


Exemple d'utilisation de la balise area :



Création de plusieurs zones "area" sur une image donnée :




1ière zone : carré noir, le lien pointe vers l'accueil du site qui s'ouvrira dans une nouvelle fenêtre.
2nde zone : partie orange, en utilisant la propriété "poly" qui pointe sur cette page (#)
3ième zone : partie verte, en utilisant à nouveau la propriété "poly"

<map name="ImgRefMap">
  <area shape="rect" href="http://www.startyourdev.com" title="Accueil StartYourDev"
      alt="Accueil StartYourDev" target="_blank" coords="25,25,75,75" />
  <area shape="poly" href="http://www.google.fr" title="Google" alt="Google"
      target="_blank" coords="1,1,100,1,100,100,75,75,75,25,25,25" />
  <area shape="poly" href="#" title="Page actuelle" alt="Page actuelle"
      target="_blank" coords="1,1,1,100,100,100,75,75,25,75,25,25" />
</map>
<img usemap="#ImgRefMap" src="../images/imagemap.png" alt="Map" />


Pour bien saisir l'utilisation des coordonnées, voici l'image détaillée avec en référence ses coordonnées principales :
L'origine (0,0) de l'image correspond au coin supérieur gauche.

détail de l image



1ière zone : carré noir, le lien pointe vers l'accueil du site qui s'ouvrira dans une nouvelle fenêtre.
2nde zone : partie orange, en utilisant la propriété "poly" qui pointe sur cette page (#)
3ième zone : partie verte, en utilisant à nouveau la propriété "poly" Accueil StartYourDev Google Page actuelle

Map