area facebook twitter youtube

< area >


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

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

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 <span style="color:red; ">usemap="#ImgRefMap"</span> src="../images/imagemap.png" alt="Map" />

 



  • a

    a

    La balise a permet de créer un lien hypertexte pointant vers un document ,l'url ,ancres au sein d'un document

    .......
    Voir Plus
  •  MAP

    MAP

    Utilisée pour définir différentes régions cliquables sur une image donnée.

    .......
    Voir Plus
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces