Code snippet page

<!-- JavaScript:Essentials code snippet 4. -->
<!-- Creating a roll-over image link. -->
<!-- This snippet is based on a code originally supplied in 
The Open University course TT280 dated 2004 
Details of available courses at http://www.open.ac.uk -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Code source: http://www.justfigures.co.uk/ -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View code snippet page</title>
<script language="JavaScript" type="text/javascript">
/* Create the 'Image' objects and preload each object
to speed up the roll-over action */
if(document.images){
	// define the off images
	image1off = new Image;
	image1off.src = "roll.gif";
	image2off = new Image;
	image2off.src = "roll.gif";
	image3off = new Image;
	image3off.src = "roll.gif";
	//define the on images
	image1on = new Image;
	image1on.src = "over.gif";
	image2on = new Image;
	image2on.src = "over.gif";
	image3on = new Image;
	image3on.src = "over.gif";
}
// image change function
function changeImage(fileName,imageName){
	if(document.images)
		{
		document[fileName].src = eval(imageName + ".src");
		}
}
</script>

</head>

<body>
<!-- call the function -->
<!-- note anchor 'href' attribute is blank for this example -->
<a href="#" onMouseOut="changeImage('image1','image1off')" onMouseOver="changeImage('image1','image1on')">
<img name="image1" src="roll.gif" alt="roll-over" border="0" width="22" height="22"></a>
<br />
<a href="#" onMouseOut="changeImage('image2','image2off')" onMouseOver="changeImage('image2','image2on')">
<img name="image2" src="roll.gif" alt="roll-over" border="0" width="22" height="22"></a>
<br />
<a href="#" onMouseOut="changeImage('image3','image3off')" onMouseOver="changeImage('image3','image3on')">
<img name="image3" src="roll.gif" alt="roll-over" border="0" width="22" height="22"></a>

</body>
</html>