Des images réactives

Rédigé par Patrice Blondel - - 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.

Fil Rss des articles de ce mot clé