JavaScripts
Image Rollover
Grizzly WebMaster home
 Grizzly WebMaster (HOME) >> JavaScripts >> Image Rollover
Save Source
Right mouse button here and select "save target as" to save the source
Fancy "mouse-over" highlight effects can be achieved through a very simple JavaScript.

Obviously before using these functions you would want to remove the verbose comments.

See this script in action.


<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>
Service Provided by Bear Consulting Group Last modified: 25 May 2009
Copyright 2001 Bear Consulting Group