Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > PHP/MySQL/Scripting

  • Print
  • + Share This
From the author of

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.

    <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>

     
  • + Share This
  • 🔖 Save To Your Account