JavaScript Resources

Create a multi-state image toolbar on your Web site with JavaScript
 

Create a multi-state image toolbar on your Web
site with JavaScript

Description:

When you're learning JavaScript, one of the most basic tricks you're taught is the image swap, wherein a single
image changes when the mouse pointer passes over it. It's pretty simple - a couple of event handlers and a line
or two of code, and it works very well when you're only concerned about visually indicating one of two button
states to the user ("normal" and "highlighted").

Complexity arises when you add a third button state to the equation. To illustrate, consider a toolbar consisting
of several buttons. Here, you not only need to "highlight" buttons as the mouse pointer moves over them, but
you also want to visually indicate which button is currently "clicked". Therefore, your JavaScript code needs
to account for both an additional button state (the "clicked" state), and also for the new conditions it raises. For
example, although buttons in the "normal" state should change to the "highlight" state when the mouse pointer
moves over them, "clicked" (selected) buttons should not alter their state until another button is clicked (or the
toolbar is reset to its default setting).

It's precisely this problem that this document hopes to address. We will guide you through the process of using
JavaScript and the DOM to build a three-state toolbar that accurately and efficiently handles different button
states, and the interdependencies between them.

—
more Resources Scripts: Forms, Text, Buttons, Games, Calendars, Miscellaneous, Utilities, Clocks,
Navigation, Windows, Cookies, Special Effects, Counters, Passwords, DHTML



[Home] [Templates] [Blog] [Forum] [Directory] JavaScript Resources - Create a multi-state image toolbar on your Web site with JavaScript