Example 5—Rollovers

A rollover is an effect in which one image is replaced for another when the user moves the mouse pointer over it. Often, this is used only with images that host hyperlinks, but that isn't necessarily a rollover's only use. The following is an example:

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!-- Cloaking device on!
if (document.images)
{
img1 = new Image;
img2 = new Image;
img1.src = "img1.gif";
img2.src = "img2.gif";
}
else
{
img1 = "";
img2 = "";
document.imgSwap = "";
}
// Cloaking device off -->
</script>
</head>
<body>
<a href="moveon.htm" onMouseover="document.imgSwap.src = img2.src" onMouseout="document
.imgSwap.src = img1.src"> <img src="img1.gif" name="imgSwap" border="0"> </a> </body> ...

Get JavaScript™ 1.5 by Example now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.