JavaScript Tip of the Week for May 27, 1996: The Infamous 3.0 (Netscape Navigator) | 3 | WebReference

JavaScript Tip of the Week for May 27, 1996: The Infamous 3.0 (Netscape Navigator) | 3

JavaScript Tip of the Weekfor May 27, 1996: The Amazing Dynamic Image

One of the cool new things added to Navigator 3.0 is the ability to change images right in an HTML document without even reloading it. I think this is going to lead to a lot of cool JavaScript applets. Anyway, to familiarize yourself with this new JavaScript "power", take a look at the image below and then press the disappear button.


Decaf.
Disappear




Cool, isn't it? How was that done? Actually, the fading away part is a GIF animation, but the image is actually changed using this line of code:
    document.images[1].src = "fade.gif";

The number in brackets, 1 , specifies which image file to change to "fade.gif". The reason this was set to the number one has to do with the order of the images in the document (kind of like an array). The first image, a JavaScript Tip of the Week logo, is image 0, or [0]. The second image is the coffee cup, image 1, or [1], and so on. Getting the image to fade away, and then reappear, is easy:
which_one = 0; 
    function change() 
    {
        if (which_one == 0) 
        {               
        document.images[1].src = "fade.gif";  <-- load fade.gif (animated GIF)
        which_one = 1;
        }
    
        else
        {
        document.images[1].src = "jtotw.gif"; <-- load jtotw.gif (coffee cup)
        which_one = 0;
        }
    }
   
Just simple if... then comparisions. To experience the full power of this little doo-hickey called a dynamic image, continue on to this weeks next tip. Source