show-hide image onmouseover

Posted by butters on Stack Overflow See other posts from Stack Overflow or by butters
Published on 2010-04-17T22:01:44Z Indexed on 2010/04/17 22:03 UTC
Read the original article Hit count: 291

Filed under:

onmouseover

|

JavaScript

|

image

|

show-hide

I have 3 images on top of each other. The first one is a normal .jpg image, the second a greyscale version and the 3rd is some kind of effect i add with a transparent .png

Now what i want is that, if i move the mouse over those images, the greyscale image is hidden or replaced by another image and afterwards visible again.

The problem here is that i am a js noob, so it's kind of hard for me to find a solution ^^

my code looks something like this:

<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>
</code></pre>

would be super-awesome if someone can help me out :)

Developer IT