How to create a rollover image button using JavaScript

[Neo]

These days every man and his dog is using JavaScript to create "rollover", or "mouse-sensitive" buttons on their site.

Where to use 'em
Rollover images are great whenever you want to make it obvious that the user should click on them (for example, buttons and menus).

Where not to use 'em
In the bath.

OK wise guy - how's it done?
Well it all hangs around JavaScript's Image class. Let's look at how we did the rollover button above, to help us understand this class.

The first thing we need to do is create two images - one for the "normal" button, and one for the "active" (rollover) button. We do this with the new Image() constructor, which creates the two Image objects:

Code: Select all

eg_on = new Image ( );
eg_off = new Image ( ); 

We then link these two Image objects to their appropriate image files by using their src properties, like this:

Code: Select all

eg_on.src = "images/eg_on.gif";
eg_off.src = "images/eg_off.gif"; 

Changing the images
Our example on this page only has one rollover button; however, often you'll want several buttons on one page, as in a menu, for example. To make this easy to do, we've created a couple of functions to handle the actual image changing. That way, you can just call the same functions for each of your buttons, without having to duplicate lots of code.

Here are those functions, called button_on() and button_off():

Code: Select all

function button_on ( imgId )
{
  if ( document.images )
  {
    butOn = eval ( imgId + "_on.src" );
    document.getElementById(imgId).src = butOn;
  }
}

function button_off ( imgId )
{
  if ( document.images )
  {
    butOff = eval ( imgId + "_off.src" );
    document.getElementById(imgId).src = butOff;
  }
} 

Note that these functions rely on your Image object names ending in "_off" (for the normal image), and "_on" (for the rolled-over image). That's just our convention; change it to something else if you like, but remember to change the Image object names in all parts of the script!

The two functions are nearly identical. Both take the Image object specified by imgId, which is the ID we will give the button in the img tag (in this case "eg"), and replace its source with the "_off" or the "_on" image's source, as appropriate.

I'm confused! What are all these different images?
There are three Image objects at work here:

eg	The actual image in the HTML page (see below); initially it points to "images/eg_off.gif"
eg_off	The "off" version of the image (which also points to "images/eg_off.gif")
eg_on	The "on", or rolled-over, version of the image, which points to "images/eg_on.gif"

The functions button_off() and button_on() simply replace the image pointed to by eg (via the .src property) with the images pointed to by eg_off and eg_on respectively. Easy!

Does the browser support rollovers?
Nearly all modern browsers support rollover images, but it's wise to check this before trying to manipulate images. If we don't do a check, then browsers that can't do rollovers will throw an error.

We make this check in the code above using the line:

Code: Select all

if ( document.images ) 

This checks for the existence of an images array in the browser's document object. If it's there, we know the browser supports image manipulation.

The HTML bit
The last piece of the puzzle is to make the call to our JavaScript functions from within the HTML itself. To do this, we need to have an active link (an <a> tag) around our rollover button. As our button doesn't need to link anywhere, we link it to # (an empty anchor).

Code: Select all

<a href="#"
onmouseout="button_off('eg'); return true"
onmouseover="button_on('eg'); return true"><img
src="images/eg_off.gif" style="width: 64px; height: 64px;
border: none;" alt="Button" id="eg"/></a> 

The two attributes onmouseout and onmouseover tell the browser to execute the JavaScript within the quotes (" ") when the mouse moves out of or over the button respectively. Within the quotes, we make a call to the appropriate image-changing function - button_off() or button_on() - that we defined above. Notice that we include the ID of the image object that we want to change ('eg') in the function calls.

Last - but by no means least - the button image is given an ID using the attribute id="eg". This ID is very important, as it is used by the button_on() and button_off() functions to determine the right image object to change (in our case, "eg"). When using many rollovers in one page, make sure you use a different image ID for each button!

Go for it!
Now you should be able to take the above code and use it to make your own rollover images. You can make as many rollovers as you like in one page - just remember to give each one a unique id, and to call the functions button_off() and button_on() with that ID.