Chapter 4: Working with Images

Creating Rollovers
Creating More Effective Rollovers
Building Three-State Rollovers
Triggering Rollovers from a Link
Making Multiple Links Change a Single Rollover
Working with Multiple Rollovers
Creating Cycling Banners
Adding Links to Cycling Banners
Building Wraparound Slideshows
Displaying a Random Image
Cycling Images with a Random Start

To use this script on your own page, click in the text area below, select all, and copy to grab the script. Then, just paste into your own page — and you're done.

Working with Multiple Rollovers

See it run: Working with Multiple Rollovers

Script 4.10

This HTML is virtually identical to Script 4.8, except for the title and reference to the external script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Multiple Links, Multiple Rollovers</title>
	<script src="script06.js" language="javascript" type="text/javascript"></script>
</head>
<body bgcolor="#EECC99">
	<img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci" align="right" hspace="50" />
	<img src="images/leoText.gif" width="375" height="26" alt="Leonardo's Inventions" />
	<a href="flyPage.html" class="textField" id="flyer"><img src="images/flyer.gif" width="293" height="165" border="0" alt="Flying Machine" vspace="10" id="flyerImg" /></a><br clear="right" />
	<img src="images/bg.gif" width="208" height="27" id="textField" alt="Text Field" align="right" vspace="20" />
	<a href="tankPage.html" class="textField" id="tank"><img src="images/tank.gif" width="325" height="92" border="0" alt="Tank" id="tankImg" /></a><br />
	<a href="heliPage.html" class="textField" id="helicopter"><img src="images/helicopter.gif" width="224" height="160" border="0" alt="Helicopter" id="helicopterImg" /></a>
</body>
</html>

Script 4.11

This script handles the multiple rollovers.

window.onload = rolloverInit;

function setupRollover(thisLink,textImage) {
	thisLink.imgToChange = new Array;
	thisLink.outImage = new Array;
	thisLink.overImage = new Array;

thisLink.imgToChange[0] = textImage;
	thisLink.onmouseout = rollOut;
	thisLink.onmouseover = rollOver;	
	
	thisLink.outImage[0] = new Image();
	thisLink.outImage[0].src = textImage.src;

thisLink.overImage[0] = new Image();
	thisLink.overImage[0].src = "images/" + thisLink.id + "Text.gif";
	
	var rolloverObj = document.getElementById(thisLink.id + "Img");
	if (rolloverObj) {
		thisLink.imgToChange[1] = rolloverObj;

thisLink.outImage[1] = new Image();
		thisLink.outImage[1].src = rolloverObj.src;
	
		thisLink.overImage[1] = new Image();
		thisLink.overImage[1].src = "images/" + thisLink.id + "_on.gif";
	} 
}

function rollOver() {
	for (var i=0;i<this.imgToChange.length; i++) {
		this.imgToChange[i].src = this.overImage[i].src;
	}
}

function rollOut() {
	for (var i=0;i<this.imgToChange.length; i++) {
		this.imgToChange[i].src = this.outImage[i].src;
	}
}

Contents:

Working with Multiple Rollovers

Script 4.10

Script 4.11

Images: