OnMouseOver

canopee31 Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
xamurai Messages postés 223 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

5 réponses

Réponse 1 / 5
Reivax962 Messages postés 3742 Statut Membre 1 011

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 Statut Membre Dernière intervention 15
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
1. canopee31 Messages postés 1 Date d'inscription Statut Membre Dernière intervention
  
  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 1 Date d'inscription Statut Membre Dernière intervention

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

Reivax962 Messages postés 3742 Statut Membre 1 011

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>

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

xamurai Messages postés 223 Date d'inscription Statut Membre Dernière intervention 15

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>

OnMouseOver

5 réponses

Discussions similaires

Newsletters