Home / code / javascript / scripts

Fade a picture in javascript

Writer: Christophe Wolfs
Published: 27 March 2008

This is cool. You can make a picture fade on when you move your mouse over it it gets back to normal.

<script language="JavaScript">
<!--
/*
Script that fades images.
Find more at http://www.webmaster2020.com
*/
nereidFadeObjects=new Object();
nereidFadeTimers=new Object();

function nereidFade(object, destOp, rate, delta)
{
  if(!document.all) return
  if(object != "[object]")
  {  
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
  }
        
  clearTimeout(nereidFadeTimers[object.sourceIndex]);
    
  diff=destOp-object.filters.alpha.opacity;
  direction=1;
  if(object.filters.alpha.opacity > destOp) direction = -1;

  delta=Math.min(direction*diff,delta);
  object.filters.alpha.opacity+=direction*delta;

  if(object.filters.alpha.opacity != destOp)
  {
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
  }
}
// -->
</script>

Add the following for every image you wish to fade:
<img src='pic.jpg' style=filter:alpha(opacity=40) onmouseover=nereidFade(this,100,40,10) onmouseout=nereidFade(this,40,20,10)>

 

TOP