Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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 (see the next section).
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>