Controlling images via Javascript

Stephen Wilson, Conceptual Design, SFSU
Navigator 3.0 and above introduced the Image object that can be controlled by Javascript. All images on a web page form part of an Image array. For example, the first image on a page is Image[0] and the second is Image[1]. Images can also be given names via the NAME= option and referred to by those names. Various aspects of the image can be dynamically changed via scripts. For example, the actual image displayed in a space can be changed by changing the src property. This new capability allows all kinds of new possibilties for script activated animations and interface feedback. As of September, 1996, Microsoft Explorer did not support this Image javascript extension.

Netscapes official documentation of Navigator 3.0 new Javascript functions. Click on link to Images information in the contents list


Simple example to change displayed image based on user clicks.

This example will all the viewer to change an image by clicking on a button. The buttons contain onclick handlers that change the src property of the accompanying image. This means a different image will fill the image space. Here is the html code that sets up the image with the name display and the Javascript code that makes the buttons change the image. Two methods of referrring to the image are shown - "images[0]" and "images.display" (assuming you have named the image "display" in its original call). If you use transparent images the residue of the old image will remain: // Here is the HTML to set up the image <IMG SRC="im1.gif" NAME="display" HEIGHT = 80 WIDTH = 80> //Here are two versions of javascript code lines to control the same image usisng different ways of referring to the image. <INPUT TYPE=Button NAME="face2" VALUE="face2" onClick="document.images[0].src='im2.gif'"> <INPUT TYPE=Button NAME="face2" VALUE="face2" onClick="document.display.src='im2.gif'">



Changing the image as the user rolls over links.

This example is similar to the one above, differing only in that it changes the the displayed image in response to the user rolling over a link. It uses the mouseover handler. Here is a sample of the code to create this effect

Here are some hypothetical links
This is hypothetical link 1
This is hypothetical link 2



A simple animation

This example shows how you could run a simple animation by quickly changing the src property of a particular image. You could use the setTimeout method and a loop to activate the animation. Note that this script also preloads several images in order to avoid waiting time between images once the animation runs. It is a slightly modified version of an example script offered in Navigator's official documentation.

[Animation]


Control the speed by typing number 10-4000


The script sets up an array of images called sequence and uses a loop to preload 4 images. The images are named im1.gif--im4.gif. Here is the javascirpt code.

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

The animate() function changes the displayed image to be each of the images by using the src property. It also checks the stop flag that is set by the go and stop buttons and calls the changespeed() function to change the delay.

function animate() { changespeed() if(stopflag==0 ) { document.sample.src = sequence[Num].src Num++ if(Num > 4) { Num = 1 } } else { // don't animte } }

The html sets up the basic image. The onload handler starts the animation by calling the animate() function. It uses the setTimeout() method to set the delay. Everytime the first image is reloaded, the animate() function restarts.

<IMG NAME="sample" SRC="im1.gif" ALT="sample animation" onLoad="setTimeout('animate()', delay)" ALIGN=left>

Options available for image object

These can be activated either by standard html markup or by using Javascript to set the values. This is extracted from the official Javascript documentation.

[NAME="imageName"] SRC="Location" [LOWSRC="Location"] [HEIGHT="Pixels"|"Value"%] [WIDTH="Pixels"|"Value"%] [HSPACE="Pixels"] [VSPACE="Pixels"] [BORDER="Pixels"] [ALIGN="left"|"right"| "top"|"absmiddle"|"absbottom"| "texttop"|"middle"|"baseline"|"bottom"] [ISMAP] [USEMAP="Location#MapName"] [onAbort="handlerText"] [onError="handlerText"] [onLoad="handlerText"]


- This page created by Stephen Wilson, Professor Conceptual Design, SFSU (http://userwww.sfsu.edu/~swilson) swilson@sfsu.edu
- More information about the Conceptual Design program is available at (http://userwww.sfsu.edu/~infoarts)
- It is a resource used in Art511 Art&Telecommunications course (http://userwww.sfsu.edu/~infoarts/Tele/Tele95.index.html)
- A comprehensive guide to Web design is available in the book World Wide Web Design Guide (Hayden Books) by Stephen Wilson
- The url of this page is (http://userwww.sfsu.edu/~infoarts/Tele/jsimage/wilson.jsimage.html)