(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!

Home Cool Button

To use you'll need coolbuttons.js. To make a button you add the class="coolButton" 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 class="coolBar". One other effective way is to use a <TABLE> tag and let the table cells (<TD>) have the class="coolButton". This is useful because you don't need to supply the width of the button.

The drag and drop was made using the genmove.js function that was discussed earlier in the genericMove article.

Sample:

Home Cool Button 1 Cool Button 2

You can also disable/enable Cool Button 1 above using disable(id) and enable(id). 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 use id.click() to simulate a click or call the function toggle(id)

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 )

Code:

<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>

Cool Buttons
As a behavior
Behavior Demo Page

Author: Erik Arvidsson