Changement de photo au passage de la souris

Bonjour,
j'ai mappé une image en 5 parties et un texte s'inscrit sur le coté de l'image "one mousse over" .
je voudrais que les zones mappées face apparaitre une autre photo (ou que la zone mappée change de couleur au
passage de la souris , et ce pour les 5 zones ) . est-ce possible ? une variable qui ferait à la fois apparaitre le texte mais aussi une nouvelle photo à la place de la première....
Merci

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title> menu musique vincent paillard</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="anc.css" />
	      <meta name="keywords" content="Vincent Paillard , Vincentpaillard , vincent paillard , Musique improvisée , basse electrique improvisation , musicien improvisateur , musiciens Rennes , compositeur Rennes ,compositeurs Rennes , compositeur ,bassiste , bassiste à rennes ,  compositeurs , compositions experimentales , musique et danse , musique pour danse , musique de film , musique pour film , musique et danse Rennes, musique pour danse Rennes, musique de film Rennes, musique pour film Rennes , Rennes improvisation libre ,improvisation libre , Rennes impro libre ,impro libre , solo basse , solo contrebasse , duo bruyne , bruyne , musique de soliste , attaché concert , l'agrippa , musicien expérimental , musique expérimentale" >
<meta name= "description" content="site de musique improvisée , composition de Vincent Paillard">
	      <!--[if IE 7]>
	   <link rel="stylesheet" type="text/css" href="anc7.css" />
	   <![endif]-->
	   
	   <!--[if IE 6]>
	   <link rel="stylesheet" type="text/css" href="anc6.css" />
	   <![endif]-->
<script type="text/javascript">

function arbreover(n) {

tab_dest = new Array("mondiv","autrediv","div3","div4","div5"); // Tableau contenant les différents id des div de destination.

for(i=0;i<tab_dest.length;i++) { // Cette boucle permet de vider tous les divs.
document.getElementById(tab_dest[i]).innerHTML = "";
}

switch(n){
   case 1:
      id_dest = tab_dest[0]; // On indique le div de destination par rapport au tableau tab_dest.
      txt = "Musique Improvisée";
   break;
   case 4:
      id_dest = tab_dest[1];
      txt = "Contacts / Concerts";
   break;
   case 3:
      id_dest = tab_dest[2];
      txt = "Expo Photo";
   break;
   case 2:
      id_dest = tab_dest[3];
      txt = "Compositions";
   break;
   case 5:
      id_dest = tab_dest[4];
      txt = "Liens Artistes";
   break;
   
   //etc. etc.
   default:
      id_dest = tab_dest[0];
      txt = "";
   break;
}
div=document.getElementById(id_dest);
div.innerHTML = txt;

}
</script>

	  

   </head>
   <body>
   
<div id="autrediv"></div>

<div id="mondiv"></div> 

<div id="div3"></div>

<div id="div4"></div>

<div id="div5"></div>

<div id="test" >
<img src="nn.jpg" width="348" height="261" border="0" usemap="#map" />
</div>



<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:ijiji -->
<area shape="poly" coords="4,4,107,4,111,137,4,137,4,4,5,4,4,4,3,5,4,3,3,3,5,4"  onmouseover="arbreover(3)"  href="photomouse.html" />
<area shape="poly" coords="6,148,137,147,141,253,7,251,6,148,5,147,6,148,6,149,6,148,6,147"  onmouseover="arbreover(4)" href="contact.html" />
<area shape="poly" coords="117,38,223,39,234,254,226,251,145,251,143,143,121,142,117,37,117,38,117,37,117,38,118,38"  onmouseover="arbreover(1)" href="musiqueimprovisee.html" />
<area shape="poly" coords="113,0,296,1,314,242,234,242,225,29,115,28,113,0,114,0,113,1,113,0,112,1"  onmouseover="arbreover(2)" href="compo.html" />
<area shape="poly" coords="300,20,348,20,348,261,316,261,300,20,300,19,299,19,300,20,300,21,300,20"  onmouseover="arbreover(5)" href="liensartistes.html" />
</map>

<object class="n"type="application/x-shockwave-flash" data="dewplayer.swf?son=acc.mp3&amp;autostart=1" width="0" height="0" color="blue">
  <param name="movie" value="dewplayer.swf?son=acc.mp3&amp;autostart=1"/></object>



</body>
</html>

Vincentcb

24 avril 2009 à 19:23:05

Timot

24 avril 2009 à 23:06:01

Je crois que j'avais déja essayé et que c'est la galère.
Le plus simple c'est de placer l'image qui va recouvrir en absolute par dessus celle en mouseover.

26 avril 2009 à 22:46:05

Ouhai ca parait galère effectivement !

le problème c'est que j'ai plusieurs photos à insérer , à recouvrir et surtout à
placer dans l'espace !
as tu un code simple pour un exemple ?

sur des zones mappées...

Changement de photo au passage de la souris

Supprimer

Modérer

Signaler le message aux modérateurs