Image Map : Liens dans une d'image

Pour permettre à l'utilisateur de cliquer à l'intérieur d'une image afin d'avoir une réponse de la page en rapport avec l'objet désigné dans l'image, on utilise une carte d'image.

Un exemple d'application commun: Sur une photo réunissant plusieurs personnes, lorsqu'on passe simplement la souris sur une de ces personnes, un message apparaît qui affiche son nom et les informations qui la concernent. Nous verrons comment réaliser une telle application.

Créer une carte d'image

La spécification HTML définit précisément comment interagir avec une image.

1) Insérer une image dans la page

<img src="image.jpg" >

2) Ajouter l'attribut "usemap"

Il sert à indiquer le nom de la carte associée à cette image, sous forme de fragment d'URL.

<img src="image.jpg" usemap="#map1" >

3) Ajouter une balise "map" dans le code de la page

<map name="map1">
</map>

Elle doit nécessairement avoir un attribut "name".

4) Dans cette balise, ajouter une ou plusieurs descriptions de zones cliquables

Ce sont des balises area dotées des attributs href, shape, coords.

Href assigne une page, shape définit une forme et coords une liste de points.

<map name="map1">
    <area href="page.html" shape="rect" coords="0,0,120,120">
</map>

A chaque zone on attribue une forme: rectangle (rect), cercle (circle), polygone (poly), puis une série de points pour la délimiter qui dépendent de cette forme, ainsi que l'URL d'une page qui sera chargée quand on clique sur la zone.

Formes et coordonnées

Dans le cas d'un rectangle les coordonnées sont de la forme x1, y1, x2, y2 (x gauche, y haut, x droit, y bas).
Pour un cercle, x, y, rayon.
Pour un polygone une succession de paires x, y.

Ces coordonnées sont relatives à l'image, le point 0,0 est le coin supérieur gauche de l'image.

Afficher des informations sur les éléments de l'image

Comment faire pour afficher des messages quand la souris passe sur une zone délimitée dans l'image?

On ajoute simplement un attribut title à une zone. La balise <title> devient contextuelle et s'applique aux élément définis à l'intérieur de l'image, par des balises <area>.

<map name="map1">
    <area href="" shape="rect" coords="0,0,120,120" title="Message contextuel" >
</map>

Exemple... Placer la souris sur les visages des actrices pour avoir leur nom.

Pour obtenir les coordonnées des rectangles, on peut utiliser Paint.Net et la fonction de sélection rectangulaire: elle affiche la position de la sélection et ses dimensions. On ajoute alors les dimensions à la position car <area> requiert les coordonnées des quatres coins du rectangle.

Code complet

<map name="hollywood" id="hollywood">
  <area href="#" shape="rect" coords="13,63,84,150" title="Gwynneth Paltrow" />
  <area href="#" shape="rect" coords="110,160,190,260" title="Naomi Watts" />
  <area href="#" shape="rect" coords="170,10,250,110" title="Salma Hayeck" />
  <area href="#" shape="rect" coords="300,30,380,130" title="Kirsten Dunst" />
  <area href="#" shape="rect" coords="250,260,340,370" title="Jennifer Aniston" />
</map>
<img src="https://www.xul.fr/images/hollywood.jpg" width="400" height="380"
    usemap="#hollywood" border="0">

Hyperliens dans une image

Dans cette autre démonstration, nous allons voir comment créer des hyperliens en chargeant des images choisies en fonction de l'objet sur lequel clique l'utilisateur.

En l'occurrence, il a le choix entre cliquer sur le visage de l'actrice ou sur le collier qu'elle porte pour voir, soit une autre photo de l'actrice, soit une photo du collier...

La forme circulaire convient mieux pour délimité le visage, on utilisera la valeur circle pour l'attribut shape.

Trois valeur de coordonnées sont alors nécessaires:

• La position horizontale.
• La position verticale.
• Le rayon du cercle.

Pour le collier, un rectangle suffira pour l'exemple, tandis que dans une image plus complexe avec plusieurs objets, on devrait utiliser poly.

<map name="map1">
 <area href="/images/asin1.jpg" shape="circle" coords="240,180,140" >
 <area href="/images/collar.jpg" shape="rect" coords="50,320,450,520">
</map>

<img id="img1" src="/images/asin2.jpg" Width="500" Height="540" usemap="#map1" > 

L'attribut href peut contenir l'URL d'une page ou d'une image. Dans l'exemple, chaque zone définit l'adresse d'une image à charger.

Associer une action à une Image Map

Montrons comment il est possible à une page Web de savoir quand l'utilisateur clique sur une image, et comment associer une action à une image.

Le code:

<map name="map3">
 <area href="/images/asin1.jpg" shape="circle" coords="240,180,140" >
 <area href="/images/collar.jpg" shape="rect" coords="50,320,450,520">
</map>

<img id="img1" src="/images/asin2.jpg" Width="500" Height="540" usemap="#map3" > 

Cliquer sur le visage pour obtenir une autre photo de l'actrice (Asin Thottumkal) ou cliquer sur le collier pour afficher la photo d'un collier (je présume qu'une femme cliquera plutôt sur le collier).

Deuxième partie

• Images dynamiques. Remplacer l'image par une autre selon l'objet sur lequel on a cliqué. On remplace aussi dynamiquement l'image map pour poursuivre la navigation dans l'image.

Outils et resources

• GIMP. Permet de délimiter interactivement une région sur une image et générer le code HTML correspondant.