Lesson 9-Images & JavaScript
The image object is very important in JavaScript. This object allows us to access images using JavaScript. Ok, in this section, we shall discuss:
Accessing
images using JavaScript
The image object, as mentioned, is created for you whenever you insert images onto your webpage. It does so automatically, even if there's not one line of JavaScript code on your page, as opposed to the Date object, for example. All you have to do is know how to refer to these images using JavaScript so you can manipulate them. Assuming you have three images on your webpage, as follows:
| Image 1: | Image 2: | Image 3: |
 |
 |
 |
If you want to refer to the three images using JavaScript, here's how:
document.images[0] //first image
document.images[1] //second image
document.images[2] //third image
As can be seen, images to JavaScript are an array of images, so you use "[ ]" to access each image, "[0]" being the first one. If you are not familiar with arrays, not to worry, they will be explained later on. There's an alternative to using integers to access the images, and that is using the name of each image. (Uh? what name?) Well, the name is something you can choose if you want to add to an image, which makes referring to them a lot easier. The name is inserted in the html tag. Lets use the first image as an example:
<html>
<body>
<img name="myimage01" src="whatever.gif" width="100"
height="50">
</html>
Now, to access this image, this is what you'd do instead:
document.images["myimage01"] //first image
Once you can access images, you can create animations or mouse over/out, even mouse down/up effects. For example, this is a typical example of a mouseover/mouseout effect (works with Netscape 3.x and 4.x) We will later see how we can create this effect for IE4.x browsers too.
This can be done with the onmouseover, onmouseout event handlers-along with the help of preloading images. So lets first talk about images being preloaded.
What is it? It is basically loading an image into cache before being used, so whenever we want to use it, bam! it appears instantaneously. Usually, when we load a page, all image are not preloaded-that's why we see these image becoming visible bit by bit. Why would we want to preload an image? Because it is the solution to avoiding having delays in between switches of images when using the onmouseover/onmousedown effect-among other things. How do we preload an image? By creating an instance of the image object, and inserting it in the <head></head>tags. Ok, don't worry, I'll explain it below: Since the object contains simply a few properties/methods, I'll list them ALL here:
| properties | methods |
| src | onLoad |
| height,width | onError |
| lowsrc | onAbort |
| border | |
| vspace,hspace |
Ok, lets preload two images to be used for the onmouseover/onmouseout effect. These are the two images we shall preload:
|
 |
|
| "1.gif" | "3.gif" |
<head>
<script>
<!--
image01= new Image(42,42)
image01.src="1.gif"
image02= new Image(42,42)
image02.src="3.gif"
//-->
</script>
</head>
Notice that the preloading of the image takes place within in <head></head> section of your webpage.
Recall what you've learned-we are creating an instance of the image object (we did something similar for the date object). By using the keyword "new", we have done that. The image object happens to accept two parameters-the width and the height of the image you are putting into the object. That, in this case, happens to be 42 by 42. Next we need to tell it what exactly to contain in it, by using the method src and pointing that to the actual path of the image.
You may be thinking to yourself :"What is this? This doesn't make any sense-why are we doing all this?" The answer is quite simple. In html, there simply is no way you can load an image without showing it. All image tags go within the body tag, which immediately displays it. But in JavaScript, you can-you can first load the image and defer until the right time to wam boom bala boom. So, that's why we are going through all this mess to do something like this. Don't worry, this is about all you need to know about the image object; the other properties are virtually not used at all.
Now that we've preloaded the images, and, recalling the way we accessed images (on the very top) using JavaScript, we can get down to business. The basic idea is to have JavaScript alter the path of the image depending on whether its onmouseover or onmouseout. Change the path, change the image!
onMouseover/onMouseout
effects script
<html>
<head>
<script language="JavaScript">
<!--
image01= new Image(42,42)
image01.src="1.gif"
image02= new Image(42,42)
image02.src="3.gif"
//-->
</script>
</head>
<body>
<a href="whatever.htm" onmouseover=
"document.images['example'].src=image02.src" onmouseout=
"document.images['example'].src=image01.src">
<img src="1.gif" name="example"></a>
</body>
</html>
One very important point: the "onmouseover, onmouseout handler is placed inside the link tag, not the image tag, although we are changing the image. Why? First of all, the image object does not support the onmouseover/onmouseout handler! Placing it in there will do nothing. Instead, we place it in the link tag, which will do the trick, because the link tag and the image tag are "connected."
Note in both the onmouseover, onmouseout reference, we refer to the same image name-"example." We want it to load whatever image the two image objects contain OVER the existing one, not on Mars or Pluto!
The above will work and produce the effect...there is one problem though: It works only with NS3.x and 4.x. It will not work with any versions of IE, and the problem is more serious than that. It will, in fact, produce error messages for IE users, either upon loading or after putting their mouse over the image. What we need here is a "filter" code that will filter out browsers that don't support the onmouseover code. So why didn't I simply implement a filter above? Because I wanted to show you exactly how the process of swapping images occurs. The concept is very important, and if I simply gave you the final version with the filter added, you may not see this. Anyhow, moving on, we will now try to implement a filter that will take care of the problem.
