The Better Rollover

Okay, that rollover script wasn't so hard! But, hey! It makes Internet Explorer 3 in Windows throw up error messages! That's no good. Not if you care about people who still use Internet Explorer 3. Don't despair, we can write a script where you won't get any error messages.

First, you will need those two images again that are exactly the same size. Here they are. One for 'on' and one for 'off'.

a button

See, it works here too. But what is the difference? Let me show you.

<HTML><HEAD> <TITLE>The Better Mouseover</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript - function button(imgname) { if (document.images) { document[imgname].src = eval(imgname + 'on.src'); } } function buttoff(imgname) { if (document.images) { document[imgname].src = eval(imgname + 'off.src'); } } // - End of JavaScript - --> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript - if (document.images) { mybuttonon = new Image(54, 54); mybuttonon.src = "buttonon.gif"; mybuttonoff = new Image(54, 54); mybuttonoff.src = "buttonoff.gif"; } // - End of JavaScript - --> </SCRIPT> <A HREF="bettermouse.html" onMouseover="button('mybutton'); window.status='Hey! This works too!'; return true" onMouseout="buttoff('mybutton')"> <IMG SRC="buttonoff.gif" NAME="mybutton" ALT="a button" WIDTH="54" HEIGHT="54" BORDER="0"></A> </BODY> </HTML>

Now, let's break it down so you can understand what you are doing:

mybuttonon = new Image(54, 54); mybuttonon.src = "buttonon.gif"; mybuttonoff = new Image(54, 54); mybuttonoff.src = "buttonoff.gif";Here you are creating an image object for each image you will be using. mybuttonon and mybuttonoff. You can name them anything you want, but notice here I've put the words 'on' and 'off' at the end of them. This will make it easier to keep track of which button is which and when you use them in the function. The numbers between the parentheses are (width, height). It is important for them to be the same as the image you are replacing for a smooth switch. If not, the browser will resize it to fit and in Communicator4 it is noticeable. with the ".src" extension you are telling the browser the path to the image you want to replace with. If it is in a folder called pictures for instance, then the path would be pictures/buttonon.gif.

if (document.images) {

This is an "if statement". What you are telling the browser here is "if you support the image object (document.images) then execute the following code." And if it doesn't support the image object, it will just ignore the code. This is how you prevent a browser that doesn't support the image object from giving you an error message. Be sure to close the 'if' statement with the closing bracket '}'.

function button(imgname) { if (document.images) { document[imgname].src = eval(imgname + 'on.src'); } }

This is a function. Here you are creating a function called button. You can pretty much call it anything you want. Inside the parentheses is a name for the variable that you will be passing from your onMouseover. It will be the name of your source image and also the first part of your image object's name.

<A HREF="bettermouse.html" onMouseover="button('mybutton'); window.status='Hey! This works too!'; return true" onMouseout="buttoff('mybutton')"> <IMG SRC="buttonoff.gif" NAME="mybutton" ALT="a button" WIDTH="54" HEIGHT="54" BORDER="0"></A>

Notice first that I have given the image a name NAME="mybutton". Now look at the onMouseover. onMouseover="button('mybutton')" - See how I am calling the function "button()" and inside the parentheses I am putting the image name as a variable "button('mybutton')". Now the function will take that variable and read it like this:

function button(mybutton) { if (document.images) { document.mybutton.src = mybuttonon.src; } }

The beauty of using a setup like this is that you can use the same function for all of your mouseovers just by changing the variable.

First you create a separate image object for each button:

if (document.images) { homeon = new Image(54, 54); homeon.src = "home.gif"; homeoff = new Image(54, 54); homeoff.src = "home2.gif"; linkon = new Image(54, 54); linkon.src = "link.gif"; linkoff = new Image(54, 54); linkoff.src = "link2.gif"; }

And then give each button image its own name and its own variable for the function:

<A HREF="homepage.html" onMouseover="button('home'); window.status='Go to my home page!'; return true" onMouseout="buttoff('home')"> <IMG SRC="home2.gif" NAME="home" ALT="homepage" WIDTH="54" HEIGHT="54" BORDER="0"></A> <A HREF="links.html" onMouseover="button('link'); window.status='Go to my link page!'; return true" onMouseout="buttoff('link')"> <IMG SRC="link2.gif" NAME="link" ALT="linkpage" WIDTH="54" HEIGHT="54" BORDER="0"></A>

Notice that each image has a different name. And I'm passing a different variable in the function for that link. "onMouseover="button('link');

That's it. Just pay attention to details. If it doesn't work, you probably have missed something. If you run into problems with this script, you can email me at pandason@best.com.