afficher/masquer l'image onmouseover

J'ai 3 images l'une sur l'autre. La première est une image .jpg normale, la seconde une version en échelle de gris et la 3ème est une sorte d'effet que j'ajoute avec un .png transparentafficher/masquer l'image onmouseover

Maintenant ce que je veux, c'est que, si je déplace la souris sur ces images, l'image en niveaux de gris est masquée ou remplacée par une autre image et ensuite visible à nouveau.

Le problème ici est que je suis un noob js, donc il est un peu difficile pour moi de trouver une solution ^^

mon code ressemble à ceci:

<html> 
<head> 
<style type="text/css"> 
<!--            
ul li{      
    display: inline-table; 
} 
.frame{ 
    position: relative; 
    height: 110px; 
    width: 110px; 
} 
.frame div{ 
    position: absolute; 
    top:0px; 
    left:0px;    
}  
.effect{           
    background:url(images/effect.png) no-repeat; 
    height:110px; 
    width: 110px; 
} 
.image{ 
    height:100px; 
    width:100px; 
    border: 1px solid red; 
    margin:4px;  
} 
.greyscale{ 
    height:100px; 
    width:100px; 
    border: 1px solid red; 
    margin:4px;   
}  
--> 
</style> 
</head> 

<body> 
<ul> 
    <li> 
    <div class="frame"> 
     <div class="image"><img src="images/pic1.jpg" height="100" width="100"></div>  
     <div class="greyscale"><img src="images/grey1.jpg" height="100" width="100"></div> 
     <div class="effect">qwert</div> 
    </div> 
    </li> 
    <li> 
    <div class="frame"> 
     <div class="image"><img src="images/pic2.jpg" height="100" width="100"></div> 
     <div class="greyscale"><img src="images/grey2.jpg" height="100" width="100"></div> 
     <div class="effect">qewrt</div> 
    </div> 
    </li> 
</ul> 

</body> 
</html>

serait super génial si quelqu'un peut me aider :)

Source

2010-04-17 butters

[Essayez cette question similer] (http://stackoverflow.com/questions/9400883/change-image-on-hover/9428063#9428063) –

Essayez d'ajouter ceci vous êtes css:

div.greyscale:hover img { display: none; }

Ceci cachera votre image si vous passez la souris sur la div en niveaux de gris.

Source

2010-04-17 22:13:27 Kdeveloper

hmm ouais, mais c'est ne fonctionne pas avec l'effet sur Haut :/ – butters

Essayez ceci:

.frame:hover .greyscale { display: none; }

Source

2010-04-18 00:01:02

Regardez dans cet exemple,

Ici, j'ai une grande image sur le dessus et 3 images ci-dessous.

Sur les images souris 3, elles remplaceront les grandes. à la sortie de la souris viendra l'image ancienne

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title><br /> 

</head> 

<body> 
<p> 
    <script type="text/javascript" language="javascript"> 
function changeImage(img){ 
    document.getElementById('bigImage').src=img; 

} 
</script> 

    <img src="../Pictures/Bigcircle.png" alt="" width="284" height="156" id="bigImage" /> 
<p>&nbsp; </p> 
<div> 
    <p> 
    <img src="../Pictures/lightcircle1.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/> 

</p> 
<p><img src="../Pictures/lightcircle2.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p> 

<p><img src="../Pictures/lightcircle3.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p> 

<p>&nbsp;</p> 


    </br> 
</div> 
</body> 
</html>

Vous pouvez le modifier comme vous le souhaitez. .. Vive

Source

2012-03-05 12:03:18

afficher/masquer l'image onmouseover

Répondre

Questions connexes