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

To create a rollover:
(See the script, below.)
  1. <A HREF="next.html"

    The link begins by specifying where the browser will go when the user clicks on the image, in this case to the page next.html.

  2. onMouseover="document.arrow.src=
    ->'images/redArrow.gif' "

    When the user moves the mouse over the image, the replacement image redArrow.gif, which is inside the images directory, is written to the document window.

  3. onMouseout="document.arrow.src=
    ->'images/blueArrow.gif' ">

    Then, when the mouse moves away, the image blueArrow.gif is swapped back in.

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

    The remainder of the image link defines the source of the original image for the page, and closes the link tag.

Though simple, this method has its disadvantages.

Script 1  Here's the simplest way to do a rollover, within a link tag.

script
<HTML>
<HEAD>
    <TITLE>A Simple Rollover</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
     <A HREF="next.html" onMouseover=
    -> "document.arrow.src='images/
    -> redArrow.gif'" onMouseout=
    -> "document.arrow.src='images/
    ->blueArrow.gif'"
><IMG SRC="images/
    -> blueArrow.gif" WIDTH=147 HEIGHT=82
    -> BORDER=0 NAME="arrow"></A>
</BODY>
</HTML>