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.)
<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.
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.
onMouseout="document.arrow.src=
->'images/blueArrow.gif' ">
Then, when the mouse moves away, the image blueArrow.gif is swapped back in.
<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.
<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>
| | |
|