Image Fader Transition

Martial Boissonneault Nov 5, 2001

This script uses an opacity filter to make a fading effect transition between two images. Works with IE5+ and NS6+.

The JavaScript Source: Miscellaneous: Image Fader Transition

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL IMAGE FADER TRANSITION:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

<!-- Begin
/************************************************************************
Script made by Martial Boissonneault © 2001 http://getElementById.com/
This script may be used and changed freely as long as this msg is intact
Visit http://getElementById.com/ for more free scripts and tutorials.
*************************************************************************/
var ie5=(document.getElementById && document.all);
var ns6=(document.getElementById && !document.all);

nPlus = 5   //the % of fading for each step
speed = 50  //the speed

// You don't have to edit below this line
nOpac = 100
function FadeImg(){
    if(document.getElementById){
        document.getElementById('img1').style.visibility="visible";
        imgs = document.getElementById('img2');
	opacity = nOpac+nPlus;
	nOpac = opacity;
	setTimeout('FadeImg()',speed);
    if(opacity>100 || opacity<0){
        nPlus=-nPlus;
    }
    if(ie5){
        imgs.style.filter="alpha(opacity=0)";
	imgs.filters.alpha.opacity = opacity;
    }
    if(ns6){
        imgs.style.MozOpacity = 0 + '%';
	imgs.style.MozOpacity = opacity + '%';
    }
  }
}
onload=FadeImg;
//  End -->
</script>

</HEAD>

<BODY>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(1 comment)

Please can you assist me. I am trying to use for images but it will only work with two images. What am i doing wrong?

ridwan Mar 22, 2012

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Image Fader Transition

Leave a Response

Attention JavaScript Coders

Go Deeper