javascript title
Basic Script Buttons Remain Acitve Fix the Bug Multiple Image Switchingt Nested Rollovers

Everything you have ever wanted to know about Rollover Scripts


The JavaScript rollover is the most common JavaScript on the Internet. It seems that nearly every web page uses it, from IBM to a personal home page. The reason for this is that it is so easy and effective. You don't need to know much about JavaScript to copy and paste a workable rollover script. This being the case, why would Power Verbs start its JavaScript tutorials with something so common and easy? The reason is that most rollover scripts are only half done. In most cases they work and that is good enough. But there is much more to a rollover script than simply changing an image. This tutorial will show you how to make your script function in a more useful fashion. You might say this is "everything you ever wanted to know about the rollover script, but did not know who to ask."

document.image

The first thing you have to be aware of is that not all browsers support rollovers. In fact, the only browsers that do are Netscape 3 and 4 and IE 4. That is not much of a limitation since well the majority of web surfers are using one of those browsers. There is an easy way to tell if a person's browser will support a rollover script. The easiest way to do this is by using a conditional statement such as the following.

if (document.image){
  //Rollover script here
}

document.image is an object in JavaScript. Without defining what an object is, document.image is a JavaScript object. This conditional statement is asking if the browser supports the object. If it does, then the "if" statement is true and the browser will run the rollover script. If not, the browser will ignore the script. Without this conditional statement or one similar to it, a browser that does not support the document.image object will produce a nasty JavaScript error.

Preloading images

It makes sense to load all the images you need for your rollover script before the browser interprets the functions. More so, all the images need to be loaded before the user can call these functions. If you do not do this, the user will get a JavaScript error. Here is the script for preloading the images used in the demo.

if (document.images) {    //conditional statement for support of document.images object

var img1off = new Image();   //preloading of images
img1off.src = "images/home-off.gif";
var img1on = new Image();
img1on.src = "images/home-on.gif";
var img2off = new Image();
img2off.src = "images/pageone-off.gif";
var img2on = new Image();
img2on.src = "images/pageone-on.gif";
var img3off = new Image();
img3off.src = "images/pagetwo-off.gif";
var img3on = new Image();
img3on.src = "images/pagetwo-on.gif";
var img4off = new Image();
img4off.src = "images/pagethree-off.gif";
var img4on = new Image();
img4on.src = "images/pagethree-on.gif";
}

Here is a breakdown of what is going on here. The img1on = new Image() is creating a JavaScript object and naming it img1on. You notice that there is an object created for each image. Since a rollover needs two images, you can see there is an "on" and an "off" image and object for each button you are creating. The use of the src property in the statement enables you to associate an actual image with an instance of the Image object. A last point here is that both images must be the same size. If they are not, the "on" image will adjust to the size of the "off" image.

Rollover functions

Here are the functions that switch the images.

function act(imgName) {
  if (document.images)
  document[imgName].src = eval(imgName + "on.src");
}

function inact(imgName) {
   if (document.images)
  document[imgName].src = eval(imgName + "off.src");
}

You notice these two functions are the same except that the first deals with the "on" images and the second deals with the "off images. Both functions are passed a parameter called imgName. Since the argument, imgName, is a string (a bit of text), it will need to be evaluated. The built-in JavaScript function, eval(), performs this task. Which imgName and "on" or "off" src is being evaluated is determined by the call to the function.

Call to function

The call to the above functions resides in the HTML part of the document at the location where you want the images to show on your web page.

<A HREF="nowhere.html" onMouseOver="act(¹img1¹)
onMouseOut="inact(¹img1¹);
<IMG SRC="images/home-off.gif" HEIGHT="50" WIDTH="161"
NAME="img1" BORDER="0" ALT="Home"></A>

Notice that the call to the function is a link. This seems to be a necessity for the rollover script to work. Part of the anchor tag is the JavaScript event handlers onMouseOver and onMouseOut. This tells your browser to perform the function imgOn when the mouse is passed over the "off" image, and to perform the function imgOff when the mouse is no long over the image. The parameter, img1, tells the function which set of images are being switched. The next tag tells the browser which image is to be displayed by default. The name attribute is necessary here for the images to be defined.

You can add a message in the status bar adding a couple lines of code to the call. THe following code goes within the quotes of the onMouseOver event handler, window.status=¹Put your message in the status bar¹; return true By adding an empty string to the onMouseOut handler, the status bar will be blank when the mouse is not over the buttons. window.status=¹¹; return true

Here is the complete call with link and status bar included

<A HREF="nowhere.html" onMouseOver="act(¹img1¹)
window.status=¹Put your message in the status bar¹; return true"
onMouseOut="inact(¹img1¹);
window.status=¹¹; return true">
<IMG SRC="images/home-off.gif" HEIGHT="50" WIDTH="161"
NAME="img1" BORDER="0" ALT="Home"></A>

Putting it all together

Here is what the complete script looks like:

<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.image){    //conditional to check for browser compatibility

img1on = new Image(161,50);    //preloading of images
img1on.src = "images/home-on.gif";
img1off = new Image(161,50);
img1off.src = "images/home-off.gif";
img2on = new Image(161,50);
img2on.src = "images/pageone-on.gif";
img2off = new Image(161,50);
img2off.src = "images/pageone-off.gif";
img3on = new Image(161,50);
img3on.src = "images/pagetwo-on.gif";
img3off = new Image(161,50);
img3off.src = "images/pagetwo-off.gif";
img4on = new Image(161,50);
img4on.src = "images/pagethree-on.gif" ;
img4off = new Image(161,50);
img4off.src = "images/pagethree-off.gif";

function act(imgName) {   //function for "on" images
  if (document.images)
  document[imgName].src = eval(imgName + "on.src");
}

function inact(imgName) {   //function for "off" images
   if (document.images)
  document[imgName].src = eval(imgName + "off.src");
    }
  }
}
// --> </SCRIPT> <!--Here are the calls to functions. -->

<table border=0 cellspacing = "0" Cellpadding ="0">
<tr>
<td><A HREF="nowhere.html" onMouseOver="act(¹img1¹)
window.status=¹Put your message in the status bar¹; return true"
onMouseOut="inact(¹img1¹);
window.status=¹¹; return true">
<IMG SRC="images/home-off.gif" HEIGHT="50" WIDTH="161"
NAME="img1" BORDER="0" ALT="Home"></A>

<A HREF="nowhere.html" onMouseOver="act(¹img2¹)
window.status=¹Customize you status bar¹; return true"
onMouseOut="inact(¹img2¹)
; window.status=¹¹; return true">
<IMG SRC="images/pageone-off.gif"
HEIGHT="50" WIDTH="161"
NAME="img2" BORDER="0" ALT=""page two"></A>

<A HREF="nowhere.html" onMouseOver="act(¹img3¹)
window.status=¹Tell visitors about your site¹; return true"
onMouseOut="inact(¹img3¹)
; window.status=¹¹; return true">
<IMG SRC="images/pagetwo-off.gif" HEIGHT="50" WIDTH="161"
NAME="img3" BORDER="0" ALT="Page two"></A>

<A HREF="nowhere.html" onMouseOver="act(¹img4¹)
window.status=¹Put some information in the status bar¹; return true"
onMouseOut="inact(¹img4¹)
; window.status=¹¹; return true">
<IMG SRC="images/pagethree-off.gif" HEIGHT="50" WIDTH="161"
NAME="img4" BORDER="0" ALT="page three"></A></td> </tr> </table>

Here is the script at work:

Home
page two
Page two
page two

You can copy/paste this script into your web page and have a good, functional rollover. But this is only the most basic rollover script. To add further functionality take a look at the subsequent pages.


Basic Script Buttons Remain Acitve Fix the Bug Multiple Image Switchingt Nested Rollovers

Close this window to return to the Power Verbs web site

Produced by Power Verbs