o      So far we have seen a very simple example of an image rollover. It is functional and works as desired, but it is lacking in a few finer details.

o      Specifically, when we use JavaScript to change the src attribute of an <img> tag, the browser has to load this image from scratch. On our local machine, this will not cause an appreciable delay, but when dealing with a remote server (as we will be on the Internet), this delay can lead to a noticeable “lag”, which can destroy the feeling of a dynamic interface.

o      Ideally, we would like to instruct the browser to load any alternate images when it loads the page. This will allow us to ensure that the new images are sitting on the user’s computer, ready to be swapped in and out instantly.

o      To do this, we need to look at object variables and object instantiation (or creation). In particular, we need to look at the Image object.

o       Each <img> tag on the page has a corresponding Image object in JavaScript. We have looked at ways of manipulating this directly, and have an idea of some of the properties an Image object can have.

o       However, we can create Image objects directly in JavaScript, without the need for a corresponding <img> tag on the page. When we create such an object, and set its src property, the browser will load the appropriate file into memory, but will not display the image on the page. 

o       In other words, we can create “virtual” images that exist within JavaScript, and use these Image objects to store the alternate images for our “real” images.

o     To create an Image object (in fact, to create any object), we need to use the following code:

             virtual_image = new Image();

o       We have seen this sort of syntax before – the use of the new keyword when we created our Arrays. new tells JavaScript that we are creating a new object. The virtual_image part of the assignment is just a variable name. In this case, the variable is an Object Variable, since it contains an object.

o        To use this variable to preload our images, we take advantage of the fact that it has the same properties and methods as any other image:

          virtual_image.src = “contactsover.jpg”;

o      The browser will now preload our image, ready to be swapped in at a later time.

Project

o       Open your previous project file, and save it under the name chapter_24.html.

o      Starting with your previous code, create a new function called preload_images in the head area script element of your page.

o       Use this function to create seven new image objects, and use each objects corresponding object variable to preload your “over” image variations.

o      Check your work in your browser to ensure that the image swapping still works as expected.

o       Add your preload_images function to the body tag of your page to ensure that it runs when the page has finished loading. Use the following syntax:

       <body onload=”preload_images();”>

o       Once you have verified that the image swapping still works as expected, expand your preload_images function to define an array of images to preload, and then use a for loop to move through the array and assign each image to the src property of an object variable. Hint: an object variable can be anything that can store information – for example an array element.

                      Check your work in your browser.