JavaScript Tutorial - 9



Now for some real fun - JavaScript gives us the ability to manipulate images.
In the usual way, we give a name to an image ... for example:

<img src=bighat.gif name=bighat width=98 height=128> I can now refer to the source of this image as document.images["bighat"].src

Click for a demo:
   document.images["bighat"].src="bighat-reverse.gif"
   document.images["bighat"].src="bighat.gif"

Task 25: A button which flips between two images using a function called flip. Note that the images must be the same size. Check.

Task 26: A slide show of about 5 images using a function called change.
I called my files pic1.jpg, pic2.jpg, ... to simplify the coding. Check.

Here's how to introduce a delay of 2 seconds - click for a demo:
   setTimeout('alert("hello")',2000)
Note the use of 'single' and "double" quotes one inside the other.

Task 27: Redo Task 25 so that the picture flips by itself after 2 seconds. Check.

Challenge 9: So ... what can you do with all this new knowledge?

HOME Table of Contents Previous Next