CSPP552: Web Programming, JavaScript

Image Rollover Example (full source)

<html>
<head><title>JavaScript Rollover</title></head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Image setup stuff
 if (document.images) {
 var Image1active, Image1inactive;
 var Image2active, Image2inactive;
 Image1active = new Image(100,100);
 Image1active.src = "active.gif";

 Image1inactive = new Image(100,100);
 Image1inactive.src = "inactive.png";

 }

 function image_on(img) {
    if (document.images) {
	document.images[img].src = Image1active.src;
    }
 }
 function image_off(img) {
    if (document.images) {
	document.images[img].src = Image1inactive.src;
    }
 }

 // script ends here -->
</SCRIPT>

<body bgcolor="#ffffff">
Hi there.<p>
<a href="javascript:;" onMouseOver="image_on('Image1'); return true;"
                       onMouseOut="image_off('Image1'); return true;">
<img src="inactive.png" name="Image1" border=0 width=100 height=100></a>
<a href="javascript:;" onMouseOver="image_on('Image2'); return true;"
                       onMouseOut="image_off('Image2'); return true;">
<img src="inactive.png" name="Image2" border=0 width=100 height=100></a>
<p>
</body>
</html>

$Id: rollme-src.html,v 1.1 2000/01/18 05:30:00 bri Exp $