Liens dans une image en HTML
Sommaire
I. Présentation
Le HTML permet à l’utilisateur d’interagir avec une image en offrant la possibilité de définir des zones cliquables dans l’image, on appelle cela une carte d’image. Lorsqu’on cliquera sur une zone précise de l’image, une page s’ouvrira, puis sur une autre zone, une autre page s’ouvrira, toutes les zones étant définies dans le code HTML de la page.
Dans cet exemple, j’utiliserai l’image suivante et le but sera que lorsque je clique sur le routeur (à gauche) je sois redirigé vers la page du lexique de Neoflow proposant la définition d’un routeur, et lorsque je clic sur le switch (à droite) je sois redirigé vers la définition d’un switch disponible sur Neoflow. Étant donné que le routeur et le switch sont dans la même image, on est obligé de définir des zones cliquables à l’intérieur.
II. Insérez une image dans la page
Avant toute chose, il faut bien entendu insérer l’image dans la page HTML, de la manière suivante – dans le cas où l’image s’appelle « mapping1.png » :
<img src="mapping1.png">
III. Ajout de l’attribut « usemap »
L’attribut « usemap » permet de spécifier le nom de la carte à utiliser sur cette image. Appelons cette carte « carte1 », ce qui donnera :
<img src="mapping1.png" usemap="carte1">
IV. Déclaration de la carte
Actuellement, notre image utilise une carte qui n’existe pas, nous devons donc la déclarer grâce à la balise « <map> » auquel il faut obligatoirement attribuer un nom grâce à l’attribut « name » sinon l’image ne peut pas retrouver la carte.
<map name="carte1"> </map>
V. Définir les zones
Les zones se définissent à l’intérieur de la base « map » grâce à la balise « area » qui doit contenir 3 attributs :
- href : Lien vers la page à aller lorsqu’on clique sur la zone.
- shape : Définit la forme de la zone, qui peut être de 3 formes différentes, rect (rectangle), circle (cercle), poly (polygone).
- coords : Indique les coordonnées x et y permettant de définir la zone selon la forme choisie.
VI. Les coordonnées selon la forme
Selon la forme choisie, il faut indiquer plus ou moins de coordonnées. Ce qui paraît logique parce qu’on ne va pas indiquer la largeur et la hauteur pour une cercle, ou encore, le rayon pour un rectangle.
- Rectangle : Lors de l’utilisation d’une zone rectangulaire, les coordonnées sont sous la forme « x1,y1,x2,y2 », où les « x1 » et « x2 » correspondent à la « distance » par rapport à la gauche de l’image et « y1 » et « y2 » par rapport au haut de l’image. Ainsi, « x1-x2 » représente un côté horizontale du rectangle et « y1-y2 » un côté vertical, ce qui permet de « construire » la zone rectangulaire.
- Cercle : Pour les zones circulaires, il faut indiquer 3 coordonnées « x, y, rayon », où « x » et « y » permettront d’obtenir le point correspondant au centre du cercle et « rayon » permet de définir le rayon du cercle.
- Polygone : Par définition un polygone a plusieurs côtés mais on ne sait pas combien… Donc pour les coordonnées de ce type de zone, il faut indiquer une suite de « x,y » correspondant chacun à un sommet du polygone.
Il est à noter que le point « x,y » à « 0,0 » correspond au coin gauche de l’image. Ce qui correspond à ceci :
VII. Zones cliquables pour l’exemple
Nous allons définir les zones cliquables correspondantes à l’exemple utilisé pour la réalisation de ce tutoriel. Je choisis de faire deux zones rectangulaires.
Il faut donc définir les zones « area » dans la carte donc la balise « map » :
<map name="carte1"> <area href="http://www.neoflow.fr/lexique/entry.php?entryID=68" shape="rect" coords="150,28,400,150"> <area href="http://www.neoflow.fr/lexique/entry.php?entryID=29" shape="rect" coords="287,42,481,124"> </map>
- La première zone définie correspond à ceci :
- La seconde zone définie correspond à ceci :
VIII. Trouver les coordonnées
Vous l’aurez vite compris, trouver les coordonnées au hasard en bidouillant ce n’est pas très pratique et on perd du temps. Heureusement, grâce à certains logiciels de retouche photo comme PhotoFiltre par exemple, on peut obtenir les coordonnées d’un point en temps réel selon où l’on place la souris.
Ainsi, on peut faire une sélection qui correspondra à la zone que l’on veut sur l’image, puis on positionne la souris sur le coin supérieur gauche de la sélection et PhotoFiltre nous donne les coordonnées du point : « X :Y=287 :42 » ce qui permet d’obtenir « x1 » et « y1 ». Ensuite, faite la même chose pour le coin inférieur droit et vous obtiendrez « x2 » et « y2 » et donc votre zone rectangulaire.
IX. Titre
Il est possible de faire apparaître un titre au survol de la zone, comme on peut le faire pour une image entière, grâce à l’attribut « title » que l’on insère dans la balise « area » directement. Par exemple, si je veux indiquer le titre « Routeur » pour la zone de gauche, je rajoute ceci dans la balise area :
title="Routeur"
X. Le code complet
Pour finir voici le code HTML complet permettant de réaliser ce tutoriel :
<html> <body> <img src="mapping1.png" usemap="#map1"> <map name="map1"> <area href="http://www.neoflow.fr/lexique/entry.php?entryID=68" shape="rect" coords="30,42,225,126" title="Routeur"> <area href="http://www.neoflow.fr/lexique/entry.php?entryID=29" shape="rect" coords="287,42,481,124"> </map> </body> </html>
