| Let's take a look at what is going on here, bit by bit.
In the code for the image, <IMG SRC="demoff.gif" WIDTH=100 HEIGHT=100 NAME="demo" ALT="Demo of JavaScript rollover" BORDER="0"> , you will see that in addition to the standard SRC, HEIGHT, WIDTH and ALT attributes, there is one called "NAME". This particular image has been called "demo". Now that the image has a name, it may be manipulated in the JavaScript. Take a look at the first part of the code in the link, after the standard HREF:
onMouseOver="if (document.images) { document.demo.src='demon.gif'; };"
This is using something called an "Event Handler", the onMouseOver, to perform a task when the mouse cursor is over the link.. pretty clear so far.
The next part, if (document.images), is testing to see if the web browser is able to use JavaScript to manipulate images. If this is true, the the next part will take place:
{ document.demo.src='demon.gif'; }
This is saying that in the document, the web page, an object named demo will have as its source, src a file named demon.gif
Since we have given our image object a name , "demo", in the image code, the source of the image will be changed to use the new file.
Looking at the next part of the code in the link:
onMouseOut ="if (document.images) { document.demo.src='demoff.gif'; };"
We can see that the same process is taking place when the onMouseOut event handler is used to perform a task when the mouse cursor moves away from the link.
In this case, the image is being changed back to the original file demoff.gif
You may have also noticed that when you moved your mouse cursor over the image, it changed immediately, without a delay to download the new image. The new image file had been "preloaded" into your browser's cache file so that it was available when the onMouseOver event handler called for it.
This was done with another bit of JavaScript in the <HEAD> section of the HTML file.
Here is the code for the preloading of the images:
<SCRIPT language="JavaScript">
<!-- start hiding from old browsers
if (document.images) {
var nav1 = new Image();
nav1.src = "demoff.gif";
var nav2 = new Image();
nav2.src = "demon.gif"
}
// end hiding -->
</SCRIPT>
This particular method of preloading the images is not particularly elegant but it gets the job done without too much confusion. After the tag starting the script,
<SCRIPT language="JavaScript">
and the comment tag hiding the script from browsers that do not "understand" JavaScript,
<!-- start hiding from old browsers,
we come to the actual preloading of the images.
The lines:
var nav1 = new Image();
nav1.src = "demoff.gif";
start by declaring a variable var nav1 as a new image, new Image();. The source of the image, nav1.src. is then set to the file name of the image file, "demoff.gif".
This will cause the browser to download the image file and store it in its cache, where it will be ready to use when called for by the JavaScript in the link code.
The next two lines:
var nav2 = new Image();
nav2.src = "images/demon.gif";
perform the same task as the other two, only for the next image file, "demon.gif"
|
