15/11/2024

Développement Web

Liens dans une image en HTML

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.

Mapping

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 :

Axe

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 :

mapping3

- La seconde zone définie correspond à ceci :

mapping4

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.

mapping5

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>
author avatar
Florian BURNEL Co-founder of IT-Connect
Ingénieur système et réseau, cofondateur d'IT-Connect et Microsoft MVP "Cloud and Datacenter Management". Je souhaite partager mon expérience et mes découvertes au travers de mes articles. Généraliste avec une attirance particulière pour les solutions Microsoft et le scripting. Bonne lecture.
Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Envoyer par mail

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.