How to Create Rollovers with JavaScript

excerpted from JavaScript for the World Wide Web: Visual QuickStart Guide, 3rd Edition, by Tom Negrino and Dori Smith

Creating More Effective Rollovers

To make the illusion of animation work, you need to make sure that the replacement image appears immediately, with no delay while it is fetched from the server. To do that, you use JavaScript to preload all the images into the browser's cache (so that they are already on the user's hard disk when they are needed) and place the images into script variables.

Then when the user moves the mouse over an image, the script swaps out one variable containing an image for a second variable containing the replacement image. Script 2 (below) shows how it is done. The visible result is the same as in Figures 1 and 2, but the apparent animation is smoother.

Script 2  This is a better way to do rollovers than in Script 1, because it won't cause errors in older browsers and the animation is smoother.

script
<HTML>
<HEAD>
    <TITLE>A Simple Rollover</TITLE>
    <SCRIPT LANGUAGE =JAVASCRIPT
    -> TYPE="TEXT/JAVASCRIPT">
    <!-- Hide script from older browsers

    if (document.images) {
        arrowRed = new Image
        arrowBlue = new Image
 
        arrowRed.src = "images/redArrow.gif"
        arrowBlue.src = "images/blueArrow.gif"
    }
    else{
        arrowRed = " "
        arrowBlue = " "
        document.arrow = " "
    }


    // End hiding script from old browsers -->
    </SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
    <A HREF="next.html"
    -> onMouseover="document.arrow.src=
    -> arrowRed.src"
    -> onMouseout="document.arrow.src=
    -> arrowBlue.src">

    -> <IMG SRC="images/blueArrow.gif"
    -> WIDTH=147 HEIGHT=82 BORDER=0
    -> NAME="arrow"></A>
</BODY>
</HTML>