Quick & Easy Javascript Image Rollovers - By Jim Richardson
---------------------------------------------------------------------------------------

Introduction

One of the most common uses of Javascript on web pages is to provide an image that changes when the user moves the mouse pointer over it. This has several benefits, not the least of which is making clear what images are links and improving the interaction between the user and the page.

There are several ways to achieve this rollover effect, and over time the method I'll show you in this tutorial has come to be my favourite. Most GUI web editors (such as Dreamweaver etc.) will write image rollover Javascript for you, but I'm of the opinion that hand coding is better, for the following reasons:

a) You wrote the code - therefore, you should be able to streamline the code for your uses and not have to put up with generic GUI editor bloat.

b)  If you understand the code, you'll be able to use/edit it if for some reason you don't have a GUI editor to hand.

c) Because the code was written by a human, another human can come along and have a fair chance of seeing what you were doing (particularly if you comment well). This is not always the case with GUI editor written code (trust me).

d) If you implement the code correctly and with some forthought, changing the code will be MUCH easier. GUI editor written code can have compatibility issues between versions, hand written code should not.

e) You can then say on your CV that you code Javascript (always a bonus).



Part I - Anatomy of a rollover script

Before we code the Javascript, we should take some time to understand what we want achieve and how we are going to achieve it.

A rollover script will generally have 3 parts to it: The preload code for the "on" images (to avoid loading lag), the script to execute when the pointer moves over the image and the script to execute when the mouse moves of the image.

Generally, we will run the preload function as the page loads by calling it in the head of the HTML document, or by having an onLoad event immediatly after the page loads. My preference is to call the preload in the head of the HTML doc, but it really doesn't make much difference either way. This will ensure we have all the "on" states of our rollover images loaded in before the user starts to activate them.

Both the "on" and "out" functions we will code will be called from onMouseover and onMouseout event handlers on the anchor tag surrounding out hot image.

One other thing to note, any images that we wish to make rollovers must have a unique name within the HTML document.



Part II - The Preload

This should be the simplest part of the script because all we need to achieve is the browser having downloaded our "on" images before any rolling over occurrs. We could load each image in seperately but because we have access to some simple control structures in Javascript we can simplify and shorten the code:


preLoad = new Array(); //Define a new array for our images

preLoad[0] = "media/lower_nav/nav_au_on.gif" //Populate the array with the URL of our images
preLoad[1] = "media/lower_nav/nav_ow_on.gif"
preLoad[2] = "media/lower_nav/nav_news_on.gif"
preLoad[3] = "media/lower_nav/nav_cu_on.gif"

function preloadImages(){ //Define a preload function

for(i=0; i<preLoad.length; i++){ //Loop through our array of images
	eval('Image' + i + ' = new Image();') //Define a new image
	eval('Image' + i + '.src = "' + preLoad[i] + '";') //Set that image source to be the corresponding URL from our array
	}

}

The preload code consists of two parts; the Array with the image URLs and the function to loop through that array.

	preLoad = new Array(); //Define a new array for our images

Does exactly what the comment says, tells Javascript we want a new Array() called preLoad.

	preLoad[0] = "media/lower_nav/nav_au_on.gif" //Populate the array with the URL of our images

Here we populate the Array so that each element has a number as the key and an image URL as a value - IMPORTANT make sure each key is a different number, or else the most recent entry will overwrite any others with the same key.

	function preloadImages(){ //Define a preload function

This line tells Javascript we are defining a new function.

	for(i=0; i<preLoad.length; i++){ //Loop through our array of images

Now we initialise a for loop to loop through the array of images.

	eval('Image' + i + ' = new Image();') //Define a new image

Here we are defining a new Image() object named for the value of i (our loop counter). The function eval() lets us concatenate a string together that will then be executed as Javascript. QUICK TIP: If you want to check the syntax of statement you concatenate together, change the eval function to alert() - when run, this will pop up a message box containing the statement.

	eval('Image' + i + '.src = "' + preLoad[i] + '";') //Set that image source to be the corresponding URL from our array

And here we set the source of the Image() object to equal the URL of the corresponding element in our preLoad array.

Hopefully you followed all of that. Now all we need do is call the preloadImages() function in the head or when the page loads and the browser will have cached all of our "on" state images before we need to access them.



Part III - The On state

oldSrc = new Array();

function swapImgOver(imgName,newSrc){
	eval('oldSrc[\'' + imgName + '\'] = document.images.' + imgName + '.src');
	eval('document.images.' + imgName + '.src = \"media/' + newSrc + '\"');
	}

This is the function we will call from the onMouseover event handler in the anchor tag surrounding our "hot" image.

	oldSrc = new Array();

This line initialises a new array called oldSrc in which we will store the URL of the off state of the image. This will make switching back to the off state when the mouse pointer moves off the "hot" image much simpler.

	function swapImgOver(imgName,newSrc){

Here we tell Javascript that we are defining a new function called swapImgOver and that it will have two arguments: imgName and newSrc.

	eval('oldSrc[\'' + imgName + '\'] = document.images.' + imgName + '.src');

Here we set an element of the array oldSrc (with a key named the same as the image being swapped) to have a value of the "off" state URL of the image. This may seem complicated, but it effectively means we are using the fact the the DOM of an HTML document can access an image by it's unique name AND know what URL the image has to produce a snapshot of the "off" state of whichever image has been rolled over.

	eval('document.images.' + imgName + '.src = \"media/' + newSrc + '\"');

And here we finally set the source of our image to the new URL supplied as the argument newSrc.



Part IV - The Off state

function swapImgOut(imgName){
	eval('document.images.' + imgName + '.src = oldSrc[\'' + imgName + '\']');
	}

Very simple this time, because of the work we did in the swapImgOver() function.

	function swapImgOut(imgName){

Define the swapImgOut() function to have an argument named imgName.

	eval('document.images.' + imgName + '.src = oldSrc[\'' + imgName + '\']');

Set the source of the image imgName to have the old "off" state URL that we stored in the array oldSrc.



Part V - The code in full

<script language="Javascript1.2">
<!--

oldSrc = new Array();

function swapImgOver(imgName,newSrc){
	eval('oldSrc[\'' + imgName + '\'] = document.images.' + imgName + '.src');
	eval('document.images.' + imgName + '.src = \"media/' + newSrc + '\"');
	}

function swapImgOut(imgName){
	eval('document.images.' + imgName + '.src = oldSrc[\'' + imgName + '\']');
	}

function preloadImages(){

for(i=0; i<preLoad.length; i++){
	eval('Image' + i + ' = new Image();')
	eval('Image' + i + '.src = "' + preLoad[i] + '";')
	}

}

preLoad = new Array();

preLoad[0] = "media/lower_nav/nav_au_on.gif"
preLoad[1] = "media/lower_nav/nav_ow_on.gif"
preLoad[2] = "media/lower_nav/nav_news_on.gif"
preLoad[3] = "media/lower_nav/nav_cu_on.gif"

preloadImages();

//-->
</script>



Part VI - Conclusion

This tutorial shows you how to make your own image rollovers with a few lines of Javascript. The finished code isn't the most simple version of a image rollover you could do, but I have refined it through several years of web design to the point were it's easily portable and bug free (as far as I know anyway).

Like I said in the introduction, I'd recommend to any web designer or developer that writing your own Javscript is much more reliable and effective than relying on GUI editor written equivalents. It may not be quicker in the short term, but you will see the benefits in the long run.

Jim Richardson - September '03
For more info contact jim@djimm.co.uk