Home » JS Resources Buttons Script Details

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


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.

Browsers Compatibility:
IE, Firefox, Opera, Safari
Visit Download
  1 week 2 week 1 month 5 months 1 year 2 year Overall
Votes 0 0 0 0 0 0 11
Rating 0 0 0 0 0 0 2.5
Added: Tue Apr 04 2006 Last Modify: Tue Apr 04 2006
Added by: Send Feedback to:

Page Visited Visited: 0

Add commentAdd comment (Comments: 0)  



Related Resources

Other Resources