Conception & Réalisation de sites Web

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 :

Illustration

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 :

Orientation

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) :

exemple de découpage

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 :

Orientation Contact FAQ Accueil

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.

Balise Indication donnée au navigateur
<map> Début d'une image cliquable ou «image map».
</map> Fin d'une image cliquable ou «image map».
<area /> Définition d'une zone cliquable, placée entre les balises <map> et </map>. Cette balise propose les attributs suivants :
shape="Val", Val étant égal à "circle" (pour un cercle), "rect" (pour un rectangle), ou "poly" (pour tout autre polygone)
coords="Val1,Val2,Val3...", Val1, Val2, Val3 étant une liste de coordonnées permettant de dessiner la forme.
href="Val", Val étant le lien ou pointe la zone cliquable
name="Val", Val étant un text alternatif décrivant la zone cliquable
Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!