(980915) Changed all samples to use tables instead which prevents line breaks if the width is to low.
(980911) Added a toggle button option. Now all methods a button needs are implemented :-)
(980904)Added the possibility to disable/enable buttons
This cool bar uses simple (hmmm... maybe not so simple) onmouseover/out (and onmousedown/up) and some element tree checking to get the right elements!
To use you'll need coolbuttons.js. To make a button you add the
to an element (this can be any element although some don't look too good). All images get gray while the mouse isn't over the
button even those that are nested inside other tags.
To group buttons like I did I placed
<SPAN> tags inside a
<DIV> that had the
One other effective way is to use a
<TABLE> tag and let the table cells (
class="coolButton". This is useful because you don't need to supply the width of the button.
|Home||Cool Button 1||Cool Button 2|
You can also disable/enable Cool Button 1 above using
One limitation though. You should call the
disable(id) function to disable the button. It isn't enough to add
an attribute called DISABLED!
|Enable the Cool Button 1 above||Disable Cool Button 1 above|
You can also toggle Cool Button 2 using the function
addToggle(id) or remove the toggle with
removeToggle(id). If you wan't to change the state of the button(pressed or not) you can either
id.click() to simulate a click or call the function
|Remove Toggle to Cool Button 2 above||Add Toggle to Cool Button 2 above|
The disable(id) won't actually happen until the document has finished rendering. The reason for this is
that it adds some elements and that results in an error if done too early. You can still call the
disable(id) anytime because this is taken care of in the script but it won't cancel mouse clicks
until the document is done. (Maybe I'll fix this but not right now :0 )
<table class="coolBar" style="margin-left: 10px;"> <tr> <td class="coolButton" onclick="window.location='http://webfx.eae.net'" nowrap> <img src="../images/home.gif"> Home </td> <td class="coolButton" onclick="alert('This can do anything')" nowrap> <img src="../images/htmlicon.gif"> <i>Cool Button</i> </td> </tr> </table>