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 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 To create an Image object (in fact, to create any object), we need to use the following code:
virtual_image = new Image();
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.
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:
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.