|
|
for September 2, 1996: The Image Object
The first objects in JavaScript were forms, frames, and windows. But with the release of Netscape 3.0, the image joins this group of objects. This tip will teach you how to use the image object efficiently and effectively. In the image object there are two important properties that you should know: name and src. Name is simply the name of an image, that is how you refer to it when working with it. The other propery, src or source, determines what image file should be in the image object. One of the most basic things you can do with an image object is called preloading. To preload an image, before it needs to be displayed, use this syntax:
imageName = new Image(height, width);
imageName.src = "image_filename";
Preloading images allows for instant gratification when combined with either animation or with onMouseOver. Take a look at the famous golden JavaScript cup below. When you move the mouse over it a preloaded GIF animation takes it's place. Both of the images were preloaded, so when the mouse moves over, they appear instantly.
The code for this is very simple, first the images are preloaded, and the name golden_cup is given to the initial graphic:
reappear = new Image(100, 75);
reappear.src = "golden_cup.gif";
fade = new Image(100, 75);
fade.src = "fade.gif";
Then onMouseOver and onMouseOut are used in the HREF tag to toggle the images:
onMouseOver = "golden_cup.src = fade.src";
onMouseOut = "golden_cup.src = reappear.src";
As you can see, the src of the preloaded image can be set to the src of the main image. In this way the image is displayed instantly. The image object also has its own set of handlers; onAbort, onError, and onLoad. The events that trigger these even handlers were all explained in Meet the New Event Handlers. The syntax for these even handlers looks like this:
imageName.onabort = function
imageName.onerror = function
imageName.onload = function
These event handlers can also be placed inside the image tag.
Now how about making it more interesting? Well then let's go on to JavaScript animation. If you've already seen the animation tip, don't bother going. But if you haven't then take a look. 
|
| ||||||||||||||||||||
