You are here: Home > Scripts > Javascript Fade Image


	What's New	Doll Makers	Room Makers	Puzzle Makers	Roiworld	Stardoll	Smilies	Links

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

About Privacy Policy Hosting by Web Hosting Canada

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