Le pingouin des @lpes

Mots clés : javascript

Des images réactives

Patrice Blondel Webmaster pluxml, javascript aucun commentaire



Cliquez sur le visage pour ouvrir une autre image, puis sur la miniature du groupe pour retrouver l'original.

Comment faire ?

J'ai tout d'abord créé trois images de même taille (600x400), elles sont retouchées ou composées avec Gimp.

Le javascript

Dans pluxml, il est à insérer à la fin de l'article.


<script type="text/javascript">
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;	
}
</script> 

Le code

<div>
<!-- initialisation de la map générique avec sandrine et paul -->

<map name="mapgeneric" id="mapgeneric">
<area href="javascript:replaceImage('img1', 'medias/paul.jpg', 'mappaul')" 
title= "Paul Richard" alt="" shape="rect" coords="45,74,155,210"></area>
<area href="javascript:replaceImage('img1', 'medias/sandrine.jpg', 'mapsandrine')" 
title= "Sandrine Piéton" alt="" shape="rect" coords="300,68,395,168"></area>
</map>

<!-- La map du club info -->

<map name="mapclubinfo" id="mapclubinfo">
<area href="javascript:replaceImage('img1', 'medias/paul.jpg', 'mappaul')" 
title= "Paul Richard" alt="" shape="rect" coords="45,74,155,210"></area>
<area href="javascript:replaceImage('img1', 'medias/sandrine.jpg', 'mapsandrine')" 
title= "Sandrine Piéton" alt="" shape="rect" coords="300,68,395,168"></area>
</map>

<!-- la map de paul -->
  
<map name="mappaul" id="mappaul">
<area href="javascript:replaceImage('img1', 'medias/clubinfo.jpg', 'mapclubinfo')" 
alt="" shape="rect" coords="489,317,578,377"></area>
</map>
<!-- la map de sandrine -->
  
<map name="mapsandrine" id="mapsandrine">
<area href="javascript:replaceImage('img1', 'medias/clubinfo.jpg', 'mapclubinfo')" 
alt="" shape="rect" coords="489,317,578,377"></area>
</map>

</div>
<!-- affichage de l'image de départ -->
<img id="img1" src="medias/clubinfo.jpg"  usemap="#mapgeneric" alt="" />

Explications

Une image réactive est définie par les balises <map> et </map>.
La balise <area> permet de définir chaque région.
Les zones « cliquables » peuvent être un rectangle (attribut shape=rect), un cercle (attribut shape=circle) ou un polygone (attribut shape=poly).
coords : définit une liste de coordonnées séparées par une virgule de la région.
href : définit l'URL de la ressource internet à laquelle la région est liée.