Images dynamiques avec Image Map

Dans la première partie, nous avons vu comment afficher des informations sur les objets dans une image et comment quand on clique sur les éléments d'une image, afficher une autre page ou une autre image.

Nous allons perfectionner ce dernier point, avec, quand on clique sur un objet dans l'image, le remplacement de l'image par une image de l'objet seul.

Deux méthodes peuvent être employées: soit en utilisant un bookmarklet, soit en ajoutant un gestionnaire d'évènement onClick.

Le code de l'image reste le même dans les deux cas:

<img id="img1" src="asin2.jpg" width="500" height="540" border="0" usemap="#map1" >

Et le code de base de l'image map est aussi commun:

<map name="map1">
 <area href="asin1.jpg" shape="circle" coords="240,180,140">
 <area href="collar.jpg'" shape="rect" coords="60,330,440,520" >
</map>

On peut accéder à la balise de l'image, par son ID:

document.getElementById("img1").src= "nouvelle url";

ou avec le DOM:

document.images[0].src = "nouvelle url";

Ajouter l'évènement onClick

On associe l'évènement à la balise area, et on assigne une action qui change la source de la balise img, pour remplacer l'image affichée.

On neutralise aussi l'attribut href avec un bookmarklet nul: javascript:void(0). 

<map name="map1">
 <area href="javascript:void(0)" shape="circle" coords="240,180,140"
   onClick="document.images[0].src = 'https://www.xul.fr/images/asin1.jpg'">
 <area href="javascript:void(0)" shape="rect" coords="60,330,440,520"
       onClick="document.images[0].src = 'https://www.xul.fr/images/collar.jpg'">
</map>

Utiliser un bookmarklet

Dans ce cas on remplace l'URL par une fonction JavaScript (voir l'article bookmarklet).

Le code du bookmarklet est le suivant:

javascript:(
  function()
    {
    document.getElementById('img1').src='https://www.xul.fr/images/asin1.jpg';
    }
)()

Il sera compacté dans l'attribut href:

<map name="map1">
 <area href="javascript:(function(){document.getElementById('img1').src=
    'https://www.xul.fr/images/asin1.jpg';})()" shape="circle" coords="240,180,140">
 <area href="javascript:(function(){document.getElementById('img1').src=
    'https://www.xul.fr/images/collar.jpg';})()" shape="rect" coords="60,330,440,520">
</map>

Limitations

Le remplacement est irréversible car l'image map reste la même:

Exemple d'images dynamiques

Une image peut être remplacée par une autre quand on clique sur un objet, une personne dans l'image initiale.

Dans cette démonstration, l'image map n'est pas remplacée pour la nouvelle image affichée.

Le code utilise deux procédés différents pour remplacer l'image, avec l'ID et avec le DOM. Cela n'a pas de rapport avec les images, c'est juste pour faire une démonstration des deux procédés.

Le code:

<map name="map1">
 <area href="javascript:(function(){
    document.getElementById('img1').src='https://www.xul.fr/images/asin1.jpg';})()"
    shape="circle" coords="240,180,140">
 <area href="javascript:void(0)"
    shape="rect" coords="60,330,440,520" 
    onClick="document.getElementById('img1').src = 'https://www.xul.fr/images/collar.jpg'">
</map>

Cliquer soit sur le visage pour remplacer la photo de l'actrice ou sur le collier pour afficher à la place de la photo l'image du collier.

Remplacer dynamiquement l'image map

Pour aller plus loin, il faut assigner dynamiquement une nouvelle image map a chaque nouvelle image affichée en remplacement.
On prendra pour exemple une affiche de la série Battlestar Galactica à partir de laquelle on veut afficher la photo des deux actrices.

Les maps

Une map générique sert de conteneur et est associée à l'unique balise img.

<img id="img1" src="" width="" height="" border="0" usemap="#mapgeneric" >
<map name="mapgeneric" id="mapgeneric">
</map>

Une carte est créée pour l'image initiale qui est l'affiche du film: 

<map name="mapgalactica" id="mapgalactica">
</map>

Le contenu de cette carte est copié dans la balise map générique.

Une autre carte est créée pour chaque nouvelle image.

Le code JavaScript

Une fonction JavaScript unique effectue le remplacement des images et des cartes. Cette fonction est appelée quand on clique sur une zone définie par une carte.

Exemple:

 <area href="javascript:replaceImage('img1', 'url', 'nom')" shape="rect" coords="0,0,170,350">

La fonction:

function replaceImage(imgid, source, mapid)
{
  var image = document.getElementById(imgid);
  image.src= source;
  var newmap = document.getElementById(mapid);
  var origin = document.getElementById("mapgeneric");
  origin.innerHTML = newmap.innerHTML;
}

La fonction remplace la source de l'image et utilise l'attribut innerHTML pour récupérer le contenu d'une balise map et l'assigner à la carte générique associée à la balise img.

Le premier paramètre est l'ID de la balise img.
Le second est l'URL de la nouvelle image.
Le troisième est l'ID de la nouvelle image map.

© 2010-2012 Xul.fr