Cours sur le langage HTML organisé par
Frédéric Jacquenod

IV Les images cliquables balise MAP

Une image peut servir d'ancre comme nous l'avons vu au paragraphe II.5 mais dans ce cas quelque soit la partie de l'image sur laquelle vous cliquez vous irez toujours vers une seule destination.
La balise MAP peut vous permettre de définir sur la même image différentes zones cliquables qui vous renvéront sur des destinations variées.


• Vous devez utiliser l'option USEMAP avec la balise IMG pour indiquer que vous définissez une image cliquable.
  <IMG USEMAP="#nom_map" SRC="./Images/image_cliquable.gif">
  
  
• Ensuite vous devez ouvrir la map "nom_map" en indiquant les différentes coordonnées des zones cliquables.
  
  <MAP NAME="nom_map">Descriptif des zones cliquables</MAP>
  
  
• Vous devez définir le type des différentes zones cliquables de votre image en utilisant son Mot Clé, en indiquant le lien sur lequel cette zone pointe et les coordonnées définissant l'élément.
  
  
  

  Type	Mot clé	Comment référencer l'élément
  Rectangle	RECT	X1,Y1 point Haut Gauche X2,Y2 point Bas Droit
  Cercle	CIRCLE	X1,Y1 Centre du cercle R Rayon du cercle
  Polynome	POLY	X1,Y1 Première extrémité X2,Y2 Deuxième extrémité X3,Y3 .....................
  Defaut	DEFAULT	Pour les points non définis précédemment

  
  <AREA SHAPE="Mot Clé" HREF="adresse du lien" COORDS=X1,Y1,X2,Y2>
  
  
• Exemple :
  
  

  Ce plan est divisé en quatre cases. Il peut être intéressant de proposer à la personne qui clique sur une des cases, un agrandissement de la zone cliquée ou des informations sur cette zone. Pour cela vous pouvez utiliser les MAP, et rattacher chaque case à un lien.

  
  exercice30
  Il faut donc trouver les coordonnées des différentes cases.
  Pour cela utilisez un logiciel tel que Xview sur les machines unix (tapez xv).
  Vous pouvez utiliser n'importe quel logiciel qui vous permet de recupérer les coordonnées absolues des différentes parties d'une image.
  
  

  Grille de controle du logiciel XView

  
  Utilisation de xv.
  
  
  • Ouvrez l'image à traiter (Load)
  • Cliquez sur les points qui déterminent les sommets de vos zones cliquables avec le bouton gauche de votre souris.
  
  
  
  Dans notre exemple, nous avons 4 rectangles. Ce qui défini un rectangle sont ses sommets haut gauche (X1,Y1) et bas droit (X2,Y2).
  Il faut donc déterminer ces deux points pour chaque rectangle.
  Nous aurons :
  
  
  • Rectangle 13 : (X1,Y1)=(0,0) et (X2,Y2)=(108,81)
  • Rectangle 14 : (X1,Y1)=(108,0) et (X2,Y2)=(209,81)
  • Rectangle 19 : (X1,Y1)=(108,81) et (X2,Y2)=(209,154)
  • Rectangle 18 : (X1,Y1)=(0,81) et (X2,Y2)=(108,154)
  
  
  

  Le source pour cette image cliquable est : <IMG USEMAP="#nantes" SRC="./Images/carre.gif"> <MAP NAME="nantes"> <AREA SHAPE="RECT" HREF="adresse1" COORDS=0,0,108,81> <AREA SHAPE="RECT" HREF="adresse2" COORDS=108,0,209,81> <AREA SHAPE="RECT" HREF="adresse3" COORDS=108,81,209,154> <AREA SHAPE="RECT" HREF="adresse4" COORDS=0,81,108,154> </MAP>

  
  Les adresses des liens sont visibles lorsque vous passez la souris sur les cases.
  Il est tout à fait possible d'avoir sur une même image des types de zones cliquables différent, un rectangle et un cercle ....
  exercice31
  
  

Frédéric Jacquenod