This lesson handles about The Image Object which is used to make slideshows and rollovers.
10.1 The Image Object
The Image Object is a property of the document object.
The Image Object has 11 properties:
It does not have any methods. Only the src property is settable and the most used, the rest you can only read their value.
You can create an Image Object using the Image Tag:
<img src="ImageURL" name="ImageName">
The Image Tag has other important properties such as width and height.
You can load a different image into your document, even after the page has finished loading, using the src property of the Image Object:
document.ImageName.src = "ImageURL"
You will use this to make slide shows and rollovers.
- Preload the images. This way the user won't have to wait 10 seconds before the next image appears after clicking next.
- Clicking next while at the last image of the slideshow should show the first image.
- Clicking previous while at the first image of the slideshow should show the last image.
- The images must be the same size
Below is an example of a slideshow:
Here is the code used in the Body section:
Below is the part that goes in the Head section. The URL's of the images are in an Array. The number of images is equal to the length property of the Array. The advantage of doing it this way, instead of just using the constant 4, is that you can add or subtract images from the Array without having to make any other changes to the script.
I added comment tags to explain the effect of the code completely:
The code looks long, but that's just because of the comments, there are only 34 lines of real code.
To make a Rollover, you must first create two images that are the same size.
All that really happens in a Rollover is the first image is normally shown, the second image is shown when you place the mouse over the image. Below is an example of a Rollover:
The two images used for this rollover are:
Here is the code for the Body section:
First of all you have to give the Image Object a name, so you will be able to refer to the object.
In the Anchor Tag, the onMouseOver event loads the second image and the onMouseOut event loads the original image. You should not forget the onMouseOut event, if you do, you will still see the second image when you move your mouse away from the image.
This is the code for the Head section to preload the images:
- Make your own slideshow.
- Make your own rollover.