Images Array
Every HTML document is considered by the JavaScript engine to have an images array, whether it contains one image, many images or even no images.
The images array, another built in object belonging to the Document Object Model, contains elements which represent actual images on a page. Elements can be referenced either by their index (order number according to their position in the document's flow) or by the HTML name attribute's value (given by a page author), otherwise known as associative array notation.
document.images[0] //the first image on a pageLike other array objects, images array elements can also be referenced without array notation, e.g. document.images.myImageName, but using array notation is a much more efficient way to create the popular image "rollover" effect as seen in the example above.
document.images['home'] //image named "home"
Associative vs. Ordinal Notation
Since images used for rollover effects are usually among many on a page and are placed within tables or other positioning markup, it is easier to refer to them using associative array syntax, rather than trying to sort out their placement in the document's flow in order to effectively use ordinal notation.
The Rollover Effect
To create the rollover effect, simply set the src property of an image object to its "on" or "off" state image within a mouseover or mouseout event handler. We'll start with just the mouseover effect:
<a href="#" onMouseOver="document.images['contact'].src = 'contactOn.gif' ">Simple enough, wouldn't you say? Now add the mouseout effect:
<img src="contactOff.gif" name="contact">
</a>
<a href="#" onMouseOver="document.images['contact'].src='contactOn.gif'"Quote Nesting
onMouseOut="document.images['contact'].src = 'contactOff.gif' ">
<img src="contactOff.gif" name="contact">
</a>
Notice that onMouseOut, the image is switched back to its original value of the src property. Also note the single quotes around the swapped image names: images names are stored as strings which require quoting and since code within event handlers must be contained in double quotes, we must nest our image names with single quotes.
Loading Images into Cache Before They're Needed
While one could code rollovers like the above example, the rollover effect would not be instantaneous because the "on" image would have to download from the server upon mouseover. To create an instantaneous mouseover effect, we'll need to pre-load the images into the user's cache so that it is displayed as soon as the mouse moves over the off state image. Enter the Image Object Constructor.
Image Object Constructor
By simply using The Image Object Constructor along with an image declaration using its "src" property, images are downloaded from the server before they are displayed. This causes the engine to grab an image from the client's cache rather than from the server, enabling the instantaneous display of an image.
The Image Object Constructor first names the new image object, then sets its src property to an actual image, including the path.
var homeOn = new Image()The image constructor code should be placed in the head of the document, outside a function body so that it is executed as the page is loading.
homeOn.src = "../images/homeOn.gif";
var homeOff = new Image()
homeOff.src = "../images/homeOff.gif";
var contactOn = new Image()
contactOn.src = "../images/contactOn.gif";
var contactOff = new Image()
contactOff.src = "../images/contactOff.gif";
Now that the images are loaded into the cache, they should be referenced by their object constructor src property, rather than by their actual name and extension:
<a href="#" onMouseOver="document.images['contact'].src=contactOn.src" onMouseOut="document.images['contact'].src=contactOff.src">Notice the object constructor name and appended src property are not quoted. This is because it is now an object reference, not a string reference.
<img src="contactOff.gif" name="contact">
</a>
View the Source
