Creating a simple Rollover:

(intermediate)		      


Rollovers are at their best when incorporated into tables: it's also easiest to create them when you have the dimensions of a Table Cell to guide you. They consist of 2 equal-sized images that populate the same Table Cell and are triggered by rolling the mouse over them.
Note: rollovers are enclosed in <a> tags - even if the link doesn't lead anywhere!

Here's the effect that we will achieve in this tutorial:

Copy the 6 images below to your hard drive:

 

Create a new .html page:

Begin by writing in the <body> of the page:

Create a <table>, and place the three images into it:

<HTML>
<HEAD>
<TITLE>Basic Rollover</TITLE>
</HEAD>

<BODY BGCOLOR="#003333">
<TABLE WIDTH="100%" HEIGHT="100%">
<TR>
<TD ALIGN="CENTER" VALIGN="MIDDLE">

<IMG SRC="white.gif" BORDER="0" NAME="Joe">

<IMG SRC="lightblue.gif" BORDER="0" NAME="Fred">

<IMG SRC="red.gif" BORDER="0" NAME="Otto">

</TD>
</TR>
</TABLE>
</BODY>

</HTML>


The important thing to realize is that the images have each been given a distinct NAME: the name could be anything at all as long as it has no spaces, and does not begin with a number.

It's the NAME that will let JavaScript interact with the image. So now let's write the hyperlinks that will make each image clickable. In the code for the hyperlinks, we will include the JavaScript event handlers that make the rollover work.

(Our last step will be to write the JavaScript itself).

Insert the following code around the images; link the images to whatever pages you wish, or simply place the '#' mark into the tag.

<A HREF="page2.html" onMouseOver="on('Joe')" onMouseOut="off('Joe')">
<IMG SRC="white.gif" BORDER="0" NAME="Joe"></A>

<A HREF="page3.html" onMouseOver="on('Fred')" onMouseOut="off('Fred')">
<IMG SRC="lightblue.gif" BORDER="0" NAME="Fred"></A>

<A HREF="page4.html" onMouseOver="on('Otto')" onMouseOut="off('Otto')">
<IMG SRC="red.gif" BORDER="0" NAME="Otto"></A>

 

Now all that's needed is to enter the JavaScript itself into the <HEAD> of the document.

Copy the following code exactly and place it inside the opening and closing <HEAD> tags of your document:


<SCRIPT LANGUAGE="JavaScript">
<!--

if (document.images) {
var JoeOff = new Image();
JoeOff.src = "images/white.gif";
var JoeOn = new Image();
JoeOn.src = "images/lightgreen.gif";

var FredOff = new Image();
FredOff.src = "images/lightblue.gif";
var FredOn = new Image();
FredOn.src = "images/darkgreen.gif";

var OttoOff = new Image();
OttoOff.src = "images/red.gif";
var OttoOn = new Image();
OttoOn.src = "images/darkblue.gif";
}


function off(linkID) {
document[linkID].src = eval(linkID+"Off.src");
}


function on(linkID) {
document[linkID].src = eval(linkID+"On.src");
}

//-->
</SCRIPT>

That's all there's to it!

To adapt the script to your own needs and images: simply swap out the image files in the tutorial with your own. Make sure the files you use in your rollover have the same dimensions.
Change the NAMEs of the files to whatever names you want.
You can add or remove as many image variables you like in the Script, just remember to be consistent!