OnMouseOver
canopee31
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
xamurai Messages postés 223 Date d'inscription Statut Membre Dernière intervention -
xamurai Messages postés 223 Date d'inscription Statut Membre Dernière intervention -
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.
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
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
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
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);};
}
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
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
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
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
Bonjour,
Voici un exemple simple, je te laisse adapter à ton cas.
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
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>
