Les images map ou images cliquables
Plusieurs zones cliquables sur une image
Nous avons vu dans les leçons précédentes comment faire un lien (<a href="...) et comment insérer une image (<img src="...). Nous sommes donc capable de faire un lien sur une image en imbriquant ses 2 balises.
Cela est en effet réalisable avec le code suivant :
<a href="page2.html"><img src="i/cours/sueur.gif" width="151" height="164" alt="Illustration" border="0" /></a>
Ce qui donne dans le navigateur :
En HTML ou XHTML, on peut également faire plusieurs zones de liens sur une seule image. On va ainsi dessiner des zones et attribuer un lien à chaqu'une d'entre elle.
C'est ce que l'on appelle une "image map" ou image cliquable en français.
Comment réaliser une "image map"
Nous allons d'abord préciser dans notre balise image que l'on utilise un "map" avec l'attribut usemap en précisant son nom.
Dans notre exemple nous baptiserons notre map «panneaux».
Notez bien l'ajout d'un dièze (#) avant le nom :
<img src="i/cours/panneau.gif" width="374" height="162" alt="Orientation" border="0" usemap="#panneaux" />
L'image affichée est la suivante :
Nous allons ensuite ajouter une balise <map> avec le nom correspondant. C'est ici que nous définirons nos zone cliquables. Cette balise peut-être placée n'importe où dans le corps de la page.
<map name="panneaux">
....
</map>
Enfin nous allons ajouter à notre map autant de balises <area> que nous avons de zones cliquables.
Pour chacune d'elle nous allons préciser les attributs suivants :
- shape, la forme de la zone cliquable qui peut-être :
- un cercle (shape="circle"),
- un rectangle (shape="rect"),
- un polygone (shape="poly") - coords, une suite de coordonnées dessinant la forme choisie
- href, le lien vers la page que l'on souhaite afficher lors du clique sur la zone
- alt, un text alternatif décrivant la zone cliquable
Je choisis de faire 3 zones cliquables sur mon image (en orange ci-dessous) :
J'aurais donc 3 balises <area> la première étant un rectangle (contact), la 2ème un cercle (FAQ) et la dernière une polygone (accueil).
Pour dessiner le rectangle, je vais donner les positions en x (horizontale) et en y (verticale) du point supérieur gauche, et du point inférieur droit.
J'aurais donc 4 chiffres pour l'attribut coords :
<area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" />
Pour dessiner le cercle, je vais donner les positions en x (horizontale) et en y (verticale) de son centre, puis son rayon.
J'aurais donc 3 chiffres pour l'attribut coords :
<area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" />
Pour dessiner le ploygone, je vais donner les positions en x (horizontale) et en y (verticale) de tous les points que je souhaite. Il faut au moins 3 points pour dessiner un polygone (un triangle), et nous pouvons en mettre autant que l'on en souhaite.
J'aurais donc de 6 à N chiffres pour l'attribut coords :
<area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html" alt="Accueil" />
Notre exemple complet
Voici un exemple complet avec notre image :
<img src="i/cours/panneau.gif" alt="Orientation" width="374" height="162" border="0" usemap="#panneaux" />
<map name="panneaux" id="panneaux">
<area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" />
<area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" />
<area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html" alt="Accueil" />
</map>
Ce qui donne le résultat suivant :
A propos du calcul des coordonnées de nos zones cliquables
Repérer les coordonnées horizontales et verticales de chaque point pour dessiner une forme n'est pas évident. L'utilisation d'un outil adapté tel Adobe Dreamweaver est alors recommandé. Il va nous permettre de dessiner directement sur nos images nos zone grâce à une interface adaptée.
