Interactive Buttons with JavaScript 373InteractivityInteractive Buttons with JavaScriptWeb Design in a Nutshell, eMatter Edition<PARAM NAME="g-value" VALUE="150">
<PARAM NAME="b-value" VALUE="255">
<PARAM NAME="pauseTime" VALUE="25">
</APPLET>
The W3C’s HTML 4.0 Specification recommends that the all-purpose
<object>tag be used to place Java applets on web pages instead of the
<applet>tag. Unfortunately, as of this writing, Netscape Navigator has prob-
lems recognizing Java applets placed with the <object> tag, and in
particular, doesn’t recognize the<param>tag when used within<object>
tags. Until browser support catches up with the W3C’s recommendations, the
<applet>tag is still the safest way to go, however, you should at least be
aware of the changing tides.- Test the applet in a browser or applet viewer. Because applets run client-side,
you don’t need a server to do your testing. - Last, but not least, it is good form to credit the author of the applet as well as
the online resource. The JavaBoutique provides a discreet logo you can place
on the page with the applet.
Troubleshooting
Most problems with applets are due to elements not being in the right places.
Make sure that your.classfile is in the directory noted by thecodebaseattribute
or within the same directory as the HTML file if nocodebaseis specified. Also be
sure that your supporting resource files are in their correct directories and that
everything is named correctly (remember that names in Java code are case-
sensitive).
Troubles may arise in setting all the parameters correctly, but these problems can
not be anticipated and need to be solved on a per-applet basis.
Interactive Buttons with JavaScript
An interactive button, also called a “rollover,” changes when the cursor or pointer
is positioned over it. By making a button light up (or otherwise call attention to
itself), you provide a stronger visual signal that the area is clickable than with a
static flat graphic. Rollovers can also be used to pop up a graphic with additional
information about the link. Whether it is because rollovers recreate the feel of CD-
ROM interfaces or just because they’re fun, audiences seem to enjoy the effect.
Rollovers are created by placing a JavaScript in the HTML file with instructions
displaying different versions of a graphic based on the position of the mouse. For
instance, when the mouse pointer is over graphic “X,” the JavaScript runs a func-
tion to display the glowing version of the graphic (“glowing X”). JavaScript is
discussed further in the next chapter, Chapter 22,Introduction to JavaScript.
There are many variations on the JavaScript used for creating simple rollovers. The
following were written by Nick Heinle, author of Designing with JavaScript
(O’Reilly & Associates, Inc., 1997) and creator of WebCoder.com (www.webcoder.
com), both excellent resources for learning JavaScript.