Ken Ward's Java Script Tutorial ...

Image Hover Buttons or Rollovers

The button on the left is a hover button. Let your mouse cross it and the image changes. This can be a neat effect in menus, and it actually helps the user know that he or she is looking at an active image. In this case when you put your mouse over the image it turns yellow, and if you click it you go to the contents page of the Java Script Tutorial.

Here is the code (and as you will see later , you can use this code with few modifications however many hover buttons you have):

Starting with the image link <img> in the body of the document, we have an image called, "img1". When we move the mouse over the image, the onMouseOver event calls the function, myOn() . We give this function the name of the image, which is img1 , and so the call is myOn('img1') . Later, due to laziness, we will do something else so we don't have to write the image name everytime when we have a lot of image rollovers or hover buttons. Note: image tags require an "alt" attribute, even if it is blank (alt=""). This is for future compatibility with XHTML.

Preloading

We will now take a break from this line, and look at how we preload the images for this one-button rollover. Preloading the images makes the rollover faster because the image is loaded before the document is complete. It also enables us to name our images for the rollover. The preloading code goes like this:

The first line checks whether the browser is capable (that is, not too old, text-only browser, etc):

if (document.images) {

This means the browser is at least NS3 or IE4. Next we define the images:

//base image

img1N= new Image(108,66);

img1N.src= 'Hovern.gif' ;

The first (and in this case, only) image is named in the HTML as 'img1' and we tell the browser that the 'normal' image is 'img1N' and the rollover or hover is 'img1H'. We tell the browser the size of the image (although this isn't essential) and then tell it the name of the image file. We do the same for the hover image:

//hover or rollover image

img1H= new Image(108,66);

img1H.src= 'Hoverna.gif' ;

The Functions

We have now preloaded the images (er... image) so the browser knows what we are talking about when we come to the functions. The first function is

The function has only one line, so it is very simple. We tell the function the name of the image we are talking about (myImgName), then we set the image in the document. We identify the image in the document using:

document[myImgName].src

and we make the loaded image:

eval(myImgName+ 'H' ).src

When we preloaded the image, we referred to the image name, img1, and we made the normal image 'img1N' and the hover image, 'img1N'. So here we add an 'H' to the name, 'img1', so we get the hover image 'img1H'. We do not merely add an 'H', but use the function eval() to tell the browser that this isn't simply some name (string), but it is an object.

The myOut() function works in exactly the same way as this one.

More than one rollover image

Below there is an example of using three rollovers (you can of course use as many as you like). The code for this is basically the same as before, we haven't changed the functions, we have merely added some more preloaded images. So in the 3 button example, the images are named: 'image1', 'image2', and the unscrupulous 'image3'. The preload code looks like this:

The code for the images is basically the same as before. Here is the code for the first image:

However, instead of writing the image name in everytime I called the functions for each image, I used:

onmouseover = "myOn( this.name )"

onmouseout = "myOut( this.name )"

By using ' this.name ', the browser finds the name of the image itself, and does not have to bother me for it:-)