<html>
<head>

<script language="JavaScript">

// array of "normal state" images
var normalImages = new Array('images/image1n.gif', 'images/image2n.gif', 'images/image3n.gif', 'images/image4n.gif');

// array of "hover state" images
var hoverImages = new Array('images/image1h.gif', 'images/image2h.gif', 'images/image3h.gif', 'images/image4h.gif');

// array of "click state" images
var clickImages = new Array('images/image1c.gif', 'images/image2c.gif', 'images/image3c.gif', 'images/image4c.gif');

// this function is called on page load
// it preloads all the hover and click images
// for faster swap response time
function preloadImages() 
{
	var i=0;

	objImage = new Image();

	for	(i=1; i<=hoverImages.length; i++)
	{
		objImage.src = hoverImages[i];
	}

	for	(i=1; i<=clickImages.length; i++)
	{
		objImage.src = clickImages[i];
	}

}

// this function resets all the images to their "normal" state // used when clicking on an image, to reset all images 
function resetAll()
{
	for	(i=1; i<=normalImages.length; i++)
	{
		obj = eval('document.image' + i);
		obj.src = normalImages[i-1];
	}

}

// used on mouseover
// swap the named image into "hover" state
// but only if it is not already in "click" state
function setHover(num)
{
	obj = eval('document.image' + num);
	str = obj.src;

	if (str.search(clickImages[num-1]) == -1)
	{
		obj.src = hoverImages[num-1];
	}
}

// swap the named image into "click" state
// previously clicked images must go back to "normal" state first function setClick(num) {
	resetAll();
	obj = eval('document.image' + num);
	obj.src = clickImages[num-1];
}

// used on mouseout
// swap the named image into "normal" state
// but only if it is not already in "click" state
function setNormal(num)
{
	obj = eval('document.image' + num);
	str = obj.src;

	if (str.search(clickImages[num-1]) == -1)
	{
		obj.src = normalImages[num-1];
	}
}
</script>

</head>

<body onLoad="javascript:preloadImages();">

<a href="#" onMouseOver="setHover(1)" onMouseOut="setNormal(1)" onClick="setClick(1)"><img name="image1" src="images/image1n.gif" width=100 height=25></a>

<p>

<a href="#" onMouseOver="setHover(2)" onMouseOut="setNormal(2)" onClick="setClick(2)"><img name="image2" src="images/image2n.gif" width=100 height=25></a>

<p>

<a href="#" onMouseOver="setHover(3)" onMouseOut="setNormal(3)" onClick="setClick(3)"><img name="image3" src="images/image3n.gif" width=100 height=25></a>

<p>

<a href="#" onMouseOver="setHover(4)" onMouseOut="setNormal(4)" onClick="setClick(4)"><img name="image4" src="images/image4n.gif" width=100 height=25></a>

</body>
</html>