Search code examples
javascriptspry

Fadein on mouseover and fadeout on mouseout

i have been trying with all different codes but still can't get this to work. All i need is to fade in an image on mouseover, and fadeout on mouseout. NOT Swapping images. i just need a simple fade in fade out effect.

fade-in on mouse over is working like a charm, but on mouse out my image does not fade out properly. i just need the image to goes back to its original state when on mouse out.

when i move my mouse back to the image, it sometimes loop the fade in and fade out effect also.

Please help =(

here's my code:

<img src="images/adapter-vector.png" width="250" height="88" id="Image1" onmouseover="MM_effectAppearFade (this, 500, 100, 50, true)" Onmouseout="MM_effectAppearFade(this, 500, 50, 100, true)">
Solution

  • Use jquery to be very simple

    $( "#Image1" ).hover(
  function() {
    $( this ).attr('src','image1.jpg');
  }, function() {
     $( this ).attr('src','image2.jpg');
  }
);

    It cant go any more simpler... Hope it helps !