eLouai.com	Smileys	Dolls	Scripts	Spyware	Shopping carts

Jul 17

Back to Scripts

Javascript, Image Fade

Requires Internet Explorer 5.5 or later to work
Click on the smiley below to make it fade to invisible

Any image you want to fadein or fadeout has to be
a) Named .. i.e. name="smiley"
b) Add javascript imageFadeOut and imageFadeIn

To enable the fade out for your images just include (copy and paste) the javascript source below into your HTML document inside the HEAD tags <head> .and </head> section.

Javascript Source

<script language="JavaScript1.2">
<!--
function imageFadeOut(img) 
{
  if ( document.all) 
  {
    img.opacity = 100;
    setOpacity(img.name, -10, 100);
  }
}

function imageFadeIn(img) 
{
  if ( document.all) 
  {
    img.opacity = 0;
    setOpacity(img.name, 10, 100);
  }
}

function setOpacity (imgName, step, delay) 
{
  var img = document.images[imgName];
  img.opacity += step;
  if (document.all) img.style.filter = 'alpha(opacity = ' + img.opacity + ')'; 
  if (step > 0 && img.opacity < 100 || step < 0 && img.opacity > 0)
    setTimeout('setOpacity("' + img.name + '",' + step + ', ' + delay + ')', delay);
} 
//-->
</script>

Original idea by Martin Honnen

References:
MSDN - setTimeout Method
MSDN - Filters and Transitions

Hosting provided by Web Hosting Canada - webhostingcanada.org

Except where otherwise noted, this site is licensed under a Creative Commons License
Privacy Policy