The rollover effect is probably the most popular effect you can accomplish with JavaScript. I have seen any number of ways to achieve this effect, but I will show you the one I find to be the easiest and most direct.

First, you will need two images that are exactly the same size. Here I have two images of a button. One for 'on' and one for 'off'.

<HTML><HEAD> <TITLE>Button Demo</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript - onbutton = new Image(54, 54); onbutton.src = "buttonon.gif"; // - End of JavaScript - --> </SCRIPT> <CENTER><a href="mouse2.html" onMouseover="document.mybutton.src=onbutton.src; window.status='Hey! I\'m on!'; return true" onMouseout="mybutton.src='buttonoff.gif'"> <IMG SRC="buttonoff.gif" WIDTH="54" HEIGHT="54" NAME="mybutton" BORDER="0"></a></CENTER> </BODY> </HTML>

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

onbutton = new Image(54, 54); onbutton.src = "buttonon.gif";Here you are creating an image object called onbutton. At this point you can call it anything you want as long as it's not the same as anything else on the page. 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 "onbutton.src" 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. <a href="mouse2.html" This is the link to the page you want to go to

onMouseover="document.mybutton.src=onbutton.src;onMouseover, of course, is telling the browser that you want to do something when the mouse is over the link. document.mybutton.src refers to the name of the original image.

window.status='Hey! I\'m on!'; return true"This is a nice touch. It puts a little message in the status bar when you mouse over and it goes away when you mouse out.

onMouseout="mybutton.src='buttonoff.gif'"> onMouseout is telling the browser that you want something to happen when the mouse moves away from the link. Then again you refer to the name of the image source and assign the original filename to switch back.

<IMG SRC="buttonoff.gif" WIDTH="54" HEIGHT="54" NAME="mybutton" BORDER="0">In the normal HTML code for the image, you'll notice that there is a NAME and a BORDER attribute. You need to give each image a different name and setting the border to zero will prevent the blue link outline.