Images


In Navigator 3.0, the kind folks at Netscape added the Image object. There are a variety of ways to use this object. One way is to use the image constructor Image([width,height]). This will allow you to create a new image object. What do you do with an image object? Well you can load an image into it while the page loads to ensure that the image will be loaded from the cache for speedy access. An image object has the following properties: So, to create a new image object, you can do the following:
some_image = new Image(100,200);
some_image.src = "spaceboy.gif";
This will create a new image that is 100x200 in size (if the actuall image is a different size, then it is scaled to 100x200).

Once your document has been loaded, you can not add any more images to be displayed. However, you can change which ones that are currently displayed. There are two ways to do this. The first way is to reference the image specifically through the document object. This can be done as follows.

<img name="disarm" src="disarm.gif" height=100 width=200>

<script language="JavaScript>
  document.disarm.src="today.gif";
</script>
This will change the current image of disarm.gif to today.gif. The other way to change the image is to use the images array. The images array is a property of the document object. The first item in the array is the first image on the document. So, to do the above example using the images array, it would look like this:
<img name="disarm" src="disarm.gif" height=100 width=200>

<script language="JavaScript>
  document.images[0].src="today.gif";
</script>

So here's an example where we first pre-load a few images into the cache. A blank image is first displayed. Then, the user can select which image is displayed with a select box.


<html>
<head>
<script language="JavaScript">
  function init() {
    // loads the images into the cache for speedy access
    cd_cover = new Array();
    for( i=0; i<5; i++) {
      cd_cover[i] = new Image();
      cd_cover[i].src = "cd" + i + ".gif";
    }
  }

  function change_picture(x) {
    // changes the current picture
    document.cd_image.src=cd_cover[x].src;
  }

</script>
</head>
<body onLoad="init()">
<img name="cd_image" src="blank.gif">
<form>
<select onChange="change_picture(this.options[this.selectedIndex].value)">
<option value="0"> The Weasels
<option value="1"> Rock Hill Pilots
<option value="2"> Gold Finger Crush
<option value="3"> Killer Tomatoes
<option value="4"> Evangelica
</select>
</form>
</body>
</html>

Animation
To animate using these methods, you just need to cycle through the images in a single location. Note that this example was blatently stolen from Netscape...At least I changed it a little bit..Oh well.
<script language="JavaScript">
delay = 100
imageNum = 1

// Preload animation images
theImages = new Array()
for(i = 1; i < 11; i++) {
   theImages[i] = new Image()
   theImages[i].src = "some_image" + i + ".gif"
   }

function animate() {
   document.animation.src = theImages[imageNum].src
   imageNum++
   if(imageNum > 10) {
   imageNum = 1
   }
}

function slower() {
   delay+=10
   if(delay > 4000) delay = 4000
}

function faster() {
   delay-=10
   if(delay < 0) delay = 0
}
</script>

<BODY>

<IMG NAME="animation" SRC="some_image1.gif" ALT="[Animation]"
   onLoad="setTimeout('animate()', delay)">

<FORM>
   <INPUT TYPE="button" Value="Slower" onClick="slower()">
   <INPUT TYPE="button" Value="Faster" onClick="faster()">
</FORM>

Return to the Front Page