Button Overkill

Last updated: 08.05.2002

This takes the image substitution idea one step further to produce a toolbar in which the buttons change appearance in response to mouse movement or actions, and explanatory text appears in a little 'LCD-look' panel on the left.


The real disadvantage of this implementation is the number of independent graphics that need to be downloaded; four for each button (three button states and a help text), plus the 'blank' LCD panel and the right-hand endcap. The graphics in this example are relatively small, having been saved as JPEGs, but one of the factors that slows down page loading is the overhead of making connections, so the sheer number of graphics used may make this technique unsuitable except when you can be certain of good connectivity, or you can make intelligent use of cacheing. You could also leave out the 'onClick' handler and associated images, which would reduce the number of distinct images that need to be downloaded at no great aesthetic cost.

Technically, this example simply combines the code from the Kai button and Button Info Panel examples. A single function is called to change both the panel image and the image of whichever button is implicated.

[raingod:resources:javascript] -- [previous][up][next][links][home]