Images interactives, démonstration

Le chapitre précédent a montré comment remplacer une image en fonction de la zone sur laquelle on clique sur une image initiale. Nous allons maintenant plus loin en remplaçant également l'image map, de façon à pouvoir poursuivre la navigation sur la nouvelle image.

On a pour image initiale une affiche de la série télévisée Battlestar Galactica qui montre deux actrices dont on veut voir une photo.

Cliquer sur un des deux visage pour afficher la photo soit de Tricia Helfer, soit de Grace Park. Puis quand la nouvelle photo est affichée, cliquer sur l'affiche incrustée pour revenir sur l'image initiale.

Il serait bien sûr possible d'afficher de nouvelle images à partir de chacune, cela à l'infini.

Code de l'image map générique.

<map name="mapgeneric" id="mapgeneric">
<area href="javascript:replaceImage('img1', 'https://www.xul.fr/images/tricia-helfer.jpg', 'maphelfer')"
  shape="rect" coords="0,0,170,350">
<area href="javascript:replaceImage('img1', 'https://www.xul.fr/images/grace-park.jpg', 'mappark')"
  shape="rect" coords="170,0,338,350" >
</map>

Le code de la carte de l'image initiale est le même.

Code de la carte pour la photo de Tricia Helfer.

<map name="maphelfer" id="maphelfer">
<area href="javascript:replaceImage('img1', 'https://www.xul.fr/images/battlestar-galactica.jpg', 'mapgalactica')"
 shape="rect" coords="240,300, 310, 370">
</map>

Code de la carte pour la photo de Grace Park.

<map name="mappark" id="mappark">
<area href="javascript:replaceImage('img1', 'https://www.xul.fr/images/battlestar-galactica.jpg', 'mapgalactica')"
 shape="rect" coords="32,40, 102, 110">
</map>   

Le code JavaScript est donné dans le tutoriel. Voir le source de la page pour l'ensemble du code.

Retourner au tutoriel: Images Map .