A Complete Guide to Web Design

Interactive Buttons with JavaScript 375

Interactivity

Interactive Buttons with JavaScript

Web Design in a Nutshell, eMatter Edition

</SCRIPT>

</HEAD>

I onMouseOver = "imgOn('img1')"
J onMouseOut = "imgOff('img1')">

<A HREF = "page2.html"

onMouseOver = "imgOn('img2')"

onMouseOut = "imgOff('img2')">

<IMG NAME = "img2" BORDER=0 HEIGHT=20 WIDTH=125 SRC="image2off.

gif"></A>

<A HREF = "page3.html"

onMouseOver = "imgOn('img3')"

onMouseOut = "imgOff('img3')">

<IMG NAME = "img3" BORDER=0 HEIGHT=20 WIDTH=125 SRC="image3off.

gif"></A>

<A HREF = "page4.html"

onMouseOver = "imgOn('img4')"

onMouseOut = "imgOff('img4')">

<IMG NAME = "img4" BORDER=0 HEIGHT=20 WIDTH=125 SRC="image4off.

gif"></A>

</BODY>

</HTML>

A This simply starts the script within theportion of the document and
defines it for the browser as “JavaScript.”
B JavaScript code is placed within the comment tags () so that
browsers that do not recognize JavaScript will keep the code hidden.
C This line detects whether the user’s browser supports theimagesobject, which
is a prerequisite for dynamic images to work. All the functions in this script are
contingent on the browser recognizing the images object. If it is not
recognized, the browser will not display the rollover effect.
D All of the graphics in the “on” state in this section are preloaded into memory
and an image object is created for them.
E All of the graphics in the “off” state in this section are preloaded and an image
is created for each. To add more buttons, simply follow the naming scheme for
adding an “on” and “off” state for each button. The name of the GIF file does
not need to be exactly the same as the image object name shown in this
example.
F This is the function that activates the button graphic. When the mouse is put
over the graphic, the MouseOver event handler passes the image name to this
function, which adds the “on” suffix to it. This sources in the “on” state GIF file.

Example 21-1: Simple JavaScript Rollover Code (continued)