Pour réaliser ce montage avec des images réactives, j’ai tout d’abord créé trois images de même taille (600x400), elles sont retouchées ou composées avec Gimp.

Il suffit ensuite d’un petit javascript pour faire fonctionner le tout.
Un clic sur le visage fait apparaître le médaillon, un autre clic sur le groupe ramène à l’image initiale.

Le javascript 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script>
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 

J’ai laissé les commentaires pour s’y retrouver (mes 3 photos sont : sandrine.jpg, paul.jpg et clubinfo.jpg).

<!-- initialisation de la map générique avec sandrine et paul -->
<map name="mapgeneric" id="mapgeneric">
<area href="javascript:replaceImage('img1', '../../images/maps/sandrine.jpg', 'mapsandrine')" title= "Sandrine Piéton" alt="" shape="rect" coords="300,68,395,168"></area>
<area href="javascript:replaceImage('img1', '../../images/maps/paul.jpg', 'mappaul')" title= "Paul Richard" alt="" shape="rect" coords="45,74,155,210"></area>
</map>
<!-- La map du club info -->
<map name="mapclubinfo" id="mapclubinfo">
<area href="javascript:replaceImage('img1', '../../images/maps/sandrine.jpg', 'mapsandrine')" title= "Sandrine Piéton" alt="" shape="rect" coords="300,68,395,168"></area>
<area href="javascript:replaceImage('img1', '../../images/maps/paul.jpg', 'mappaul')" title= "Paul Richard" alt="" shape="rect" coords="45,74,155,210"></area>
</map>
<!-- la map de sandrine -->  
<map name="mapsandrine" id="mapsandrine">
<area href="javascript:replaceImage('img1', '../../images/maps/clubinfo.jpg', 'mapclubinfo')" alt="" shape="rect" coords="489,317,578,377"></area>
</map>
<!-- la map de paul -->  
<map name="mappaul" id="mappaul">
<area href="javascript:replaceImage('img1', '../../images/maps/clubinfo.jpg', 'mapclubinfo')" alt="" shape="rect" coords="489,317,578,377"></area>
</map>
<img id="img1" src="../../images/maps/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.