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.

Making Multiple Links Change a Single Rollover

See it run: Making Multiple Links Change a Single Rollover

Script 4.8

In this HTML, each of the links and images on the page have a unique id.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Multiple Links, Single Rollover</title>
	<script src="script05.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.9

This JavaScript handles the multiple links and images. When the user rolls over a link, the image changes.

Contents:

Making Multiple Links Change a Single Rollover

Script 4.8

Script 4.9

Images: