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.
FEEDBACK
COMMENTS
SUBMIT SCRIPT
Visited: 0
Add comment
(Comments: 0)
