Double Rollovers

| Web Tricks and Techniques: Table of Contents | Resources |

A More Complex Rollover:

(intermediate)

This works a lot like the simple Rollover of the previous tutorial: except that a new spot is added into the mix to hold the additional image that will appear when the script is activated. That image will appear in the place of a clear (transparent) image file, sized to the exact dimensions of the rollover that will take its place (in this case, 150 pixels by 150 pixels).

There's also a browser-sniffer at work here: notice, in the code below, that the sniffer script is placed before the rollover script, and the rollover script calls it.

Here's an example (mouseover the links or the color squares next to them):

link 1
link 2
link 3

Here are the image files you need for this example: right-click on the file names to save them to your computer.
This example uses 10 images in all: 2 each for the main links, and 4 (including the clear image file) for the second rollover.

images/a.gif
images/b.gif
images/c.gif
images/f.gif
images/h.gif
images/d.gif
images/clear.gif
images/cat.gif
images/kid.gif
images/daisy.gif

Here's the code (it looks a lot more complicated than it really is; remember that the rollovers in this example are placed into a table - which greatly expands the length of the code!)

<HTML>
<HEAD>
<TITLE>Multiple Rollovers</TITLE>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">

</SCRIPT>

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

bVer = parseInt(navigator.appVersion);
flgg=(((navigator.userAgent.substring(0,7) == "Mozilla") && (bVer >= 3))?1:0);

function rollIt(){
if (flgg) {
if (flg==0){
document.a.src="images/d.gif";
document.taDah.src="images/cat.gif";
}

if (flg==1){
document.b.src="images/f.gif";
document.taDah.src="images/kid.gif";
}
if (flg==2){
document.c.src="images/h.gif";
document.taDah.src="images/daisy.gif";
}

if (flg==99){
document.a.src="images/a.gif";
document.b.src="images/b.gif";
document.c.src="images/c.gif";
document.taDah.src="images/clear.gif";
}
}
}

// -->
</SCRIPT>
</HEAD>