Part 8: The Image-object
Images on a web-page
Now we are going to have a look at the Image-object which is available
help of the Image-object you can change images on a web-page. This
allows us for example to create animations.
Especially if you have many images on one page it gets hard to keep count of all images. Giving names to the different images solves this problem. If you declare an image with this tag
<img src="img.gif" name="myImage" width=100 height=100>
you can address it through document.myImage or document.images["myImage"].
Loading new images
<img src="img1.gif" name="myImage" width=100 height=100>
The image img1.gif is being loaded and gets the name myImage. The following line of code replaces the old image img1.gif with the new image img2.gif:
The new image has always got the same size as the old image. You cannot change the size of the area in which the image is being displayed. You can test this example through clicking on the following button (works only once).
One drawback might be that the new image gets loaded after assigning a new address to the src property. As the image is not preloaded it takes some time until the new image is retrieved through the Internet. In some situations this is ok - but often these delays are not acceptable. So what can we do about this? Yes, preloading the image is the solution. For this purpose we have to create a new Image-object. Look at these lines of code:
hiddenImg= new Image(); hiddenImg.src= "img3.gif";The first line creates a new Image-Object. The second line defines the address of the image which shall be represented through the object hiddenImg. We have already seen that assigning a new address to the src attribute forces the browser to load the image the address is pointing at. So the image img2.gif gets loaded when the second line of this code is being executed. As the name hiddenImg implies the image is not being displayed after the browser finished loading it. It is just kept in the memory (or better in the cache) for later use. In order to display this image we can now use this line:
Now the image is being taken from the cache and displayed immediately. We
have managed to preload the image.
Of course the browser must have finished the preloading for being able to display an image without delay. So if you have many images specified for preloading there might be a delay nevertheless because the browser has been busy to download all the other pictures. You always have to consider the speed of the Internet - the downloading of the images doesn't go faster with this code shown here. We only try to start the downloading of the images earlier - so the user can see them earlier. This makes the whole process much smoother.
If you have a fast Internet connection you might wonder what all this talk is about. Which delay is this guy talking about all the time? Well, there are still some people sitting behind a 14.4 modem (No, not me. I just upgraded to 28.8 - oh yes...).
Changing images on user-initiated events
The source code for this example looks like this:
<a href="#" onMouseOver="document.myImage2.src='img2.gif'" onMouseOut="document.myImage2.src='img1.gif'"> <img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>This code causes some problems though:
Have a look at the code (I have added some comments):
preload("link1", "img1f.gif", "img1t.gif");This means that the script should load the two images img1f.gif and img1t.gif. The first image is the image which should be displayed when the mousecursor isn't inside the image area. When the user moves the mousecursor across the image area the second image is shown. With the first argument "img1" of the call of the preload() function we specify which Image-object on the web-page the two preloaded images belong to. If you look into the <body> part of our example you will find an image with the name img1. We use the name of the image (and not its number) in order to be able to change the order of the pictures without changing the script.
©1996-1998 by Stefan Koch