<html>
<head>
<title>Image Rollover Example</title>
<script language="JavaScript1.1">
<!--
// notice that the image code is in a "JavaScript1.1" code block
// allocate "Image" objects and set the image-file
var gButtonGreen = new Image();
gButtonGreen.src = "images/button_green.gif";
var gButtonGreenOn = new Image();
gButtonGreenOn.src = "images/button_green_on.gif";
//-->
</script>
<script language="JavaScript">
<!--
// We use the technique of defining two copies
// of the same function. Any browsers that only
// support JavaScript 1.0 will get a function
// that does nothing. But the page does not error.
//
function rollover( imagename, objectsrc )
{
// do nothing
}
//-->
</script>
<script language="JavaScript1.1">
<!--
// The second implementation of the rollover
// function actually does the work. This
// function will be used by any browsers that
// support JavaScript 1.1 or later
//
function rollover( imagename, objectsrc )
{
if ( document.images )
document.images[imagename].src = eval(objectsrc+".src");
}
//-->
</script>
</head>
<body bgcolor="#CCCCCC">
<!--
We have two links one around the "GreenButton" image and a separate one to
demonstrate that we can cause a rollover from a different link.
Please note that the "img" has been labeled with name="GreenButton". This
is important since we use the label to identify which image to rollover.
-->
<p><a href="../imagerollover.asp"
onmouseover="rollover('GreenButton','gButtonGreenOn')"
onmouseout="rollover('GreenButton','gButtonGreen')"><img
src="images/button_green.gif" name="GreenButton" border="0" width="71"
height="70"></a></p>
<p><a href="../imagerollover.asp"
onmouseover="rollover('GreenButton','gButtonGreenOn')"
onmouseout="rollover('GreenButton','gButtonGreen')">Rollover Link</a></p>
</body>
</html>
|
