Accueil    HTML    Balise MAP
 



balise map  Balise MAP : Image map

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


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <map> est utilisée pour définir différentes régions cliquables sur une image donnée. Les éléments <map> et <img> sont ainsi liés par l'attribut "name" pour <map> et par l'attribut "usemap" pour le tag <img>.
Attention, la valeur associée à l'attribut "usemap" doit être précédée d'un "#".

Par exemple l'image suivante référencera la map déclarée ensuite grâce à leurs attributs "usemap" d'une part et "name" d'autre part :
<img usemap="#ZoneDeLien" src=" ...
<map name="ZoneDeLien"> ...

Les différentes zones cliquables dans l'image sont définies au sein de l'élément <map> par les balises <area> qui déterminent la taille et la forme de ces zones ainsi que l'url cible.



Propriétés pour la balise map :




Propriétés Définition Valeurs
name Valeur de référence pour identifier l'image utilisée, à partir de son attribut "usemap" Texte


Exemple d'utilisation de la balise map :



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" target="_blank"
      coords="25,25,75,75" />
  <area shape="poly" href="http://www.google.fr" title="Google" target="_blank"
      coords="1,1,100,1,100,100,75,75,75,25,25,25" />
  <area shape="poly" href="#" title="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" />


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"