Capt. Horatio T.P. Webb

Javascript Image Swapper Parks -- FALL 1999 Last Updated 10:00 AM 10/26/99

The image above's inital tag value: <img src="cptm0001.gif" name="img1" border="1">

Blue   Red   Yellow   Green   White

The general reference to an image in javascript is the image name:

       document.images["name attribute of the image"].src = URL of the image

OR

you can use the image number as encountered by the browser (in the case the 2nd image):

        document.images[1].src = URL of the image

If you provide an id attribute like this:

        <img src="cptm0001.gif" name="img1" id="captpic" border="1">

then you could refer to the image by its id like this:

        document.getElementById["captpic"].src = URL of the image

We can also preload the images into image objects like this:

if (document.images) // ****** preload the images 
   {
    var captb= new Image(200,150);
    var captr= new Image(200,150);
    var capty= new Image(200,150);
    var captg= new Image(200,150);
    var captw= new Image(200,150);
    captb.src="cptm0001.gif";
    captr.src="cptr0001.gif";
    capty.src="cpty0001.gif";
    captg.src="cptg0001.gif";
    captw.src="cptw0001.gif";
    }

Here five image objects are defined as "captb" through "captw". Then using the object names the image files are retrieved and stored. Then in subsequent script code we can refer to these images like this:

        document.images["img1"].src = captb.src;