Sujet Précédent Sujet Suivant

OnMouseOver

Fermé
canopee31 Messages postés 3 Date d'inscription jeudi 13 janvier 2011 Statut Membre Dernière intervention 13 janvier 2011 - 13 janv. 2011 à 11:00
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 - 13 janv. 2011 à 14:52
Bonjour,
Je ne sais pas comment utiliser onMouseOver sur une image pour déclencher le changement d'une autre image.
Je sais le faire pour la même image.
Merci pour votre aide.
Cordialement.

5 réponses

Réponse 1 / 5
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
13 janv. 2011 à 11:21
Bonjour,

Tu programmes en quel langage ?
Si c'est pour de l'html, il faut mettre un id à l'autre image, et l'appeler en utilisant document.getElementById('...')

Xavier
0
Réponse 2 / 5
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
Modifié par xamurai le 13/01/2011 à 11:27
1) initialise la premiere image avec 
 onmouseover="changerImage(this)"


function changerImage(tag) 
{ 
    tag.src = "image2"; 
    tag.mouseover = null; 
    tag.mouseout = function(){remetreLaFunctionInitial(tag);}; 
} 

function remetreLaFunctionInitial(tag) 
{ 
   tag.onmouseout = null; 
   tag.onmouseover = function(){changerImage(tag);}; 
}
0
canopee31 Messages postés 3 Date d'inscription jeudi 13 janvier 2011 Statut Membre Dernière intervention 13 janvier 2011
13 janv. 2011 à 12:13
Bonjour,
Merci pour cette réponse, je viens d'insérer ce code dans mon HTML.
Ca ne marche pas, je pense qu'il manque quelque chose.
Image 1 qui ne change pas mais sur laquelle il y a l'évènement onmousseover.
Image 2 qui est une image par défaut.
Image 3 c'est l'image qui remplace l'image 2 lorsque l'image 1 est survolée.
Bon comme tu l'as compris je fais mes débuts!
Merci
0
Réponse 3 / 5
canopee31 Messages postés 3 Date d'inscription jeudi 13 janvier 2011 Statut Membre Dernière intervention 13 janvier 2011
13 janv. 2011 à 13:22
Bonjour,
Merci pour cette réponse, il s'agit d'une page HTML.
Il y a 3 images.
Image 1 qui ne change pas mais sur laquelle il y a l'évènement onmousseover.
Image 2 qui est une image par défaut.
Image 3 c'est l'image qui remplace l'image 2 lorsque l'image 1 est survolée.
Je fais mes débuts!
Merci
0
Réponse 4 / 5
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
13 janv. 2011 à 14:31
Bonjour,
Voici un exemple simple, je te laisse adapter à ton cas. 

<html>
  <head>
    <script type="text/javascript">
      function changeImage(id, src)
      {
        var img = document.getElementById(id);
        img.src = src;
      }
    </script>
  </head>
  <body>
    <img id="image1" src="image1.jpg" onmouseover="changeImage('image2', 'image3.jpg')" onmouseout="changeImage('image2', 'image2.jpg')"/>
    <img id="image2" src="image2.jpg" />
  </body>
</html>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
13 janv. 2011 à 14:52
observe ces deux example: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">
var images = new Array("http://www.marchechampetre.ca/chicken.jpg","http://www.fwallpapers.net","http://www.fwallpapers.net");
var position = 1;
var len  = images.length;
function changerImage(tag) 
{ 
    tag.src = images[position % len]; 
    ++position;
    tag.mouseover = null; 
    //attendre deux seconde pour reactiver la fonction
    setTimeout( function(){tag.mouseout = function(){remetreLaFunctionInitial(tag);}; } , 5000);
} 


var defile = true;
function changerImageParSecond(tag, secondes) 
{ 
    tag.src = images[position % len]; 
    ++position;
    tag.onmouseout = function(){defile = false;};
    if(defile)
    tm = setTimeout(  function(){changerImageParSecond(tag, secondes); } , 1000*secondes);
} 


function remetreLaFunctionInitial(tag) 
{ 
   tag.onmouseout = null; 
   tag.onmouseover = function(){changerImage(tag);}; 
} 

</script>
</head>
<body>
   normal
  <img id="imgid" width="200" height="200" src="http://bilder.gebrauchtwagen.at/fahrzeug_bilder/55/55665/t_1338091_21293548462.JPG" onmouseover="changerImage(this);"/>
  
  automatique
  <img id="imgid" width="200" height="200" src="http://bilder.gebrauchtwagen.at/fahrzeug_bilder/55/55665/t_1338091_21293548462.JPG" onmouseover="changerImageParSecond(this,3);"/>
</body>
</html>
0