各种各样的按钮

下面为效果显示

Button 0

Button 1

Button 2

Button 3

MOZ

Button 0 Button 1 Button 2 Button 3 Button 4 Button 5

Button 0 Button 1 Button 2

脚本说明:
把如下代码加入<body>区域中：
<SCRIPT  type=text/javascript>
if (window.moz == true && (typeof window.emulateAttachEvent != "function" || typeof window.extendEventObject != "function"))
	alert("Error! IE Emulation file not included.");

if (window.moz) {
	emulateAttachEvent();
	extendEventObject();
}
/* end Mozilla specific emulation initiation */

function createButton(el) {

el.attachEvent("onmouseover",	createButton.overCoolButton);
	el.attachEvent("onmouseout",	createButton.outCoolButton);
	el.attachEvent("onmousedown",	createButton.downCoolButton);
	el.attachEvent("onmouseup",		createButton.upCoolButton);
	el.attachEvent("onclick",		createButton.clickCoolButton);
	el.attachEvent("ondblclick",	createButton.clickCoolButton);
	el.attachEvent("onkeypress",	createButton.keypressCoolButton);
	el.attachEvent("onkeyup",		createButton.keyupCoolButton);
	el.attachEvent("onkeydown",		createButton.keydownCoolButton);
	el.attachEvent("onfocus",		createButton.focusCoolButton);
	el.attachEvent("onblur",		createButton.blurCoolButton);
	
	el.className = "coolButton";
	
	el.setEnabled	= createButton.setEnabled;
	el.getEnabled	= createButton.getEnabled;
	el.setValue		= createButton.setValue;
	el.getValue		= createButton.getValue;
	el.setToggle	= createButton.setToggle;
	el.getToggle	= createButton.getToggle;
	el.setAlwaysUp	= createButton.setAlwaysUp;
	el.getAlwaysUp	= createButton.getAlwaysUp;
	
	el._enabled		= true;
	el._toggle		= false;
	el._value		= false;
	el._alwaysUp	= false;
	
	return el;
}

createButton.LEFT = window.moz ? 0 : 1;

/* event listeners */

createButton.overCoolButton = function () {
	var toEl = createButton.getParentCoolButton(window.event.toElement);
	var fromEl = createButton.getParentCoolButton(window.event.fromElement);
	if (toEl == fromEl || toEl == null) return;
	
	toEl._over = true;
	
	if (!toEl._enabled) return;
	
	createButton.setClassName(toEl);
};

createButton.outCoolButton = function () {
	var toEl = createButton.getParentCoolButton(window.event.toElement);
	var fromEl = createButton.getParentCoolButton(window.event.fromElement);
	if (toEl == fromEl || fromEl == null) return;
	
	fromEl._over = false;
	fromEl._down = false;
	
	if (!fromEl._enabled) return;

createButton.setClassName(fromEl);
};

createButton.downCoolButton = function () {
	if (window.event.button != createButton.LEFT) return;
	
	var el = createButton.getParentCoolButton(window.event.srcElement);
	if (el == null) return;
	
	el._down = true;
	
	if (!el._enabled) return;

createButton.setClassName(el);
};

createButton.upCoolButton = function () {
	if (window.event.button != createButton.LEFT) return;
	
	var el = createButton.getParentCoolButton(window.event.srcElement);
	if (el == null) return;
	
	el._down = false;
	
	if (!el._enabled) return;
	
	if (el._toggle)
		el.setValue(!el._value);
	else
		createButton.setClassName(el);
};

createButton.clickCoolButton = function () {
 	var el = createButton.getParentCoolButton(window.event.srcElement);
	el.onaction = el.getAttribute("onaction");
	if (el == null || !el._enabled || el.onaction == "" || el.onaction == null) return;
	
	if (typeof el.onaction == "string")
		el.onaction = new Function ("event", el.onaction);
	
	el.onaction(window.event);
};

createButton.keypressCoolButton = function () {
	var el = createButton.getParentCoolButton(window.event.srcElement);
	if (el == null || !el._enabled || window.event.keyCode != 13) return;
	
	el.setValue(!el._value);
	
	if (el.onaction == null) return;
	
	if (typeof el.onaction == "string")
		el.onaction = new Function ("event", el.onaction);
	
	el.onaction(window.event);
};

createButton.keydownCoolButton = function () {
	var el = createButton.getParentCoolButton(window.event.srcElement);
	if (el == null || !el._enabled || window.event.keyCode != 32) return;
	createButton.downCoolButton();
};

createButton.keyupCoolButton = function () {
	var el = createButton.getParentCoolButton(window.event.srcElement);
	if (el == null || !el._enabled || window.event.keyCode != 32) return;
	createButton.upCoolButton();
	
	//el.setValue(!el._value);	// is handled in upCoolButton()
	
	if (el.onaction == null) return;
	
	if (typeof el.onaction == "string")
		el.onaction = new Function ("event", el.onaction);
	
	el.onaction(window.event);
};

createButton.focusCoolButton = function () {
	var el = createButton.getParentCoolButton(window.event.srcElement);
	if (el == null || !el._enabled) return;
	createButton.setClassName(el);
};

createButton.blurCoolButton = function () {
	var el = createButton.getParentCoolButton(window.event.srcElement);
	if (el == null) return;
	
	createButton.setClassName(el)
};

createButton.getParentCoolButton = function (el) {
	if (el == null) return null;
	if (/coolButton/.test(el.className))
		return el;
	return createButton.getParentCoolButton(el.parentNode);
};

/* end event listeners */

createButton.setClassName = function (el) {
	var over = el._over;
	var down = el._down;
	var focused;
	try {
		focused = (el == document.activeElement && el.tabIndex > 0);
	}
	catch (exc) {
		focused = false;
	}
	
	if (!el._enabled) {
		if (el._value)
			el.className = "coolButtonActiveDisabled";
		else
			el.className = el._alwaysUp ? "coolButtonUpDisabled" : "coolButtonDisabled";
	}
	else {
		if (el._value) {
			if (over || down || focused)
				el.className = "coolButtonActiveHover";
			else
				el.className = "coolButtonActive";
		}
		else {
			if (down)
				el.className = "coolButtonActiveHover";
			else if (over || el._alwaysUp || focused)
				el.className = "coolButtonHover";
			else
				el.className = "coolButton";
		}
	}
};

createButton.setEnabled = function (b) {
	if (this._enabled != b) {
		this._enabled = b;
		createButton.setClassName(this, false, false);
		if (!window.moz) {
			if (b)
				this.innerHTML = this.firstChild.firstChild.innerHTML;
			else
				this.innerHTML = "<span class='coolButtonDisabledContainer'><span class='coolButtonDisabledContainer'>" + this.innerHTML + "</span></span>";
		}
	}
};

createButton.getEnabled = function () {
	return this._enabled;
};

createButton.setValue = function (v, bDontTriggerOnChange) {
	if (this._toggle && this._value != v) {
		this._value = v;
		createButton.setClassName(this, false, false);
		
		this.onchange = this.getAttribute("onchange");
		
		if (this.onchange == null || this.onchange == "" || bDontTriggerOnChange) return;
		
		if (typeof this.onchange == "string")
			this.onchange = new Function("", this.onchange);

this.onchange();
	}
};

createButton.getValue = function () {
	return this._value;
};

createButton.setToggle = function (t) {
	if (this._toggle != t) {
		this._toggle = t;
		if (!t) this.setValue(false);
	}
};

createButton.getToggle = function () {
	return this._toggle;
};

createButton.setAlwaysUp = function (up) {
	if (this._alwaysUp != up) {
		this._alwaysUp = up;
		createButton.setClassName(this, false, false);
	}
};

createButton.getAlwaysUp = function () {
	return this._alwaysUp;
};
</SCRIPT>

<STYLE>
.coolButton {
	BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonHover {
	BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonActiveHover {
	BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonActive {
	BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonActiveDisabled {
	BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonDisabled {
	BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonUpDisabled {
	BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButton IMG {
	FILTER: gray()
}
.coolButtonHover {
	BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: buttonhighlight; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: buttonshadow; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: buttonhighlight; PADDING-TOP: 1px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: buttonshadow
}
.coolButtonActiveHover {
	BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 3px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: buttonshadow; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: buttonhighlight; PADDING-BOTTOM: 0px; BORDER-TOP-COLOR: buttonshadow; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: buttonhighlight
}
.coolButtonActive {
	BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 3px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: buttonshadow; BACKGROUND-IMAGE: url(images/cbback.gif); BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: buttonhighlight; PADDING-BOTTOM: 0px; BORDER-TOP-COLOR: buttonshadow; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: buttonhighlight
}
.coolButtonUpDisabled {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 2px; COLOR: graytext; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 0px
}
.coolButtonActiveDisabled {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 2px; COLOR: graytext; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 0px
}
.coolButtonDisabled {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 2px; COLOR: graytext; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 0px
}
.coolButtonActiveDisabled {
	BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 3px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: buttonshadow; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: buttonhighlight; PADDING-BOTTOM: 0px; BORDER-TOP-COLOR: buttonshadow; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: buttonhighlight
}
.coolButtonUpDisabled {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: buttonhighlight; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: buttonshadow; BORDER-TOP-COLOR: buttonhighlight; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: buttonshadow
}
.coolButtonUpDisabled IMG {
	moz-opacity: 0.5
}
.coolButtonActiveDisabled IMG {
	moz-opacity: 0.5
}
.coolButtonDisabled IMG {
	moz-opacity: 0.5
}
.coolButtonUpDisabled .coolButtonDisabledContainer {
	DISPLAY: block; BACKGROUND: graytext; FILTER: chroma(color=#010101) dropshadow(color=ButtonHighlight, offx=1, offy=1); WIDTH: 100%; HEIGHT: 100%
}
.coolButtonActiveDisabled .coolButtonDisabledContainer {
	DISPLAY: block; BACKGROUND: graytext; FILTER: chroma(color=#010101) dropshadow(color=ButtonHighlight, offx=1, offy=1); WIDTH: 100%; HEIGHT: 100%
}
.coolButtonDisabled .coolButtonDisabledContainer {
	DISPLAY: block; BACKGROUND: graytext; FILTER: chroma(color=#010101) dropshadow(color=ButtonHighlight, offx=1, offy=1); WIDTH: 100%; HEIGHT: 100%
}
.coolButtonUpDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
	BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: gray()
						
						chroma(color=#ffffff) chroma(color=#fefefe) chroma(color=#fdfdfd)
						chroma(color=#fcfcfc) chroma(color=#fbfbfb) chroma(color=#fafafa)
						chroma(color=#f9f9f9) chroma(color=#f8f8f8) chroma(color=#f7f7f7)
						chroma(color=#f6f6f6) chroma(color=#f5f5f5) chroma(color=#f4f4f4)
						chroma(color=#f3f3f3) 
						mask(color=#010101)
}
.coolButtonActiveDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
	BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: gray()
						
						chroma(color=#ffffff) chroma(color=#fefefe) chroma(color=#fdfdfd)
						chroma(color=#fcfcfc) chroma(color=#fbfbfb) chroma(color=#fafafa)
						chroma(color=#f9f9f9) chroma(color=#f8f8f8) chroma(color=#f7f7f7)
						chroma(color=#f6f6f6) chroma(color=#f5f5f5) chroma(color=#f4f4f4)
						chroma(color=#f3f3f3) 
						mask(color=#010101)
}
.coolButtonDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
	BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: gray()
						
						chroma(color=#ffffff) chroma(color=#fefefe) chroma(color=#fdfdfd)
						chroma(color=#fcfcfc) chroma(color=#fbfbfb) chroma(color=#fafafa)
						chroma(color=#f9f9f9) chroma(color=#f8f8f8) chroma(color=#f7f7f7)
						chroma(color=#f6f6f6) chroma(color=#f5f5f5) chroma(color=#f4f4f4)
						chroma(color=#f3f3f3) 
						mask(color=#010101)
}

{
	box-sizing: border-box; moz-box-sizing: border-box
}
HTML {
	BACKGROUND: buttonface; HEIGHT: 100%
}
BODY {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: MessageBox; OVERFLOW: auto; COLOR: buttontext; PADDING-TOP: 0px; HEIGHT: 100%; BORDER-RIGHT-WIDTH: 0px
}
TABLE {
	BORDER-RIGHT: 2px groove; BORDER-TOP: 2px groove; MARGIN: 10px; BORDER-LEFT: 2px groove; BORDER-BOTTOM: 2px groove
}
P {
	MARGIN: 10px
}
#blueTable {
	BACKGROUND-COLOR: rgb(120,172,255)
}
#blueTable TD {
	BACKGROUND-COLOR: transparent
}
#blueTable .coolButtonUpDisabled {
	COLOR: rgb(60,86,128)
}
#blueTable .coolButtonActiveDisabled {
	COLOR: rgb(60,86,128)
}
#blueTable .coolButtonDisabled {
	COLOR: rgb(60,86,128)
}
#blueTable .coolButtonUpDisabled .coolButtonDisabledContainer {
	BACKGROUND: rgb(60,86,128)
}
#blueTable .coolButtonActiveDisabled .coolButtonDisabledContainer {
	BACKGROUND: rgb(60,86,128)
}
#blueTable .coolButtonDisabled .coolButtonDisabledContainer {
	BACKGROUND: rgb(60,86,128)
}
#blueTable .coolButtonUpDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
	BACKGROUND: none transparent scroll repeat 0% 0%
}
#blueTable .coolButtonActiveDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
	BACKGROUND: none transparent scroll repeat 0% 0%
}
#blueTable .coolButtonDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
	BACKGROUND: none transparent scroll repeat 0% 0%
}
</STYLE>

<STYLE id=mozGrooveCSS disabled>BODY {
	FONT: Message-Box; moz-user-select: none
}
TABLE {
	BORDER-RIGHT: buttonface 2px groove; BORDER-TOP: buttonface 2px groove; BORDER-LEFT: buttonface 2px groove; BORDER-BOTTOM: buttonface 2px groove
}
</STYLE>

<SCRIPT language=JavaScript1.5>
if (window.moz == true) document.getElementById("mozGrooveCSS").removeAttribute("disabled");
</SCRIPT>

<TABLE style="BACKGROUND: buttonface" cellSpacing=1>
  <TBODY>
  <TR>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle> 
      Button 0</TD>
    <TD class=coolButtonHover><IMG src="foldericon.gif" 
      align=absMiddle> Button 1</TD>
    <TD class=coolButtonActiveHover><IMG src="foldericon.gif" 
      align=absMiddle> Button 2</TD>
    <TD class=coolButtonActive><IMG src="foldericon.gif" 
      align=absMiddle> Button 3</TD>
    <TD class=coolButtonDisabled><SPAN class=coolButtonDisabledContainer><SPAN 
      class=coolButtonDisabledContainer><IMG src="foldericon.gif" 
      align=absMiddle> IE</SPAN></SPAN></TD>
    <TD class=coolButtonActiveDisabled><SPAN 
      class=coolButtonDisabledContainer><SPAN 
      class=coolButtonDisabledContainer><IMG src="foldericon.gif" 
      align=absMiddle> IE</SPAN></SPAN></TD>
    <TD class=coolButtonUpDisabled><SPAN 
      class=coolButtonDisabledContainer><SPAN 
      class=coolButtonDisabledContainer><IMG src="foldericon.gif" 
      align=absMiddle> IE</SPAN></SPAN></TD>
    <TD class=coolButtonDisabled><IMG src="foldericon.gif" 
      align=absMiddle> MOZ</TD>
    <TD class=coolButtonActiveDisabled><IMG src="foldericon.gif" 
      align=absMiddle> MOZ</TD>
    <TD class=coolButtonUpDisabled><IMG src="foldericon.gif" 
      align=absMiddle> MOZ</TD></TR></TBODY></TABLE>
<P>
<TABLE id=blueTable cellSpacing=1>
  <TBODY>
  <TR>
    <TD class=coolButton onaction="alert(event)"><IMG 
      src="foldericon.gif" align=absMiddle> Button 0</TD>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle> 
      Button 1</TD>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle> 
      Button 2</TD>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle> 
      Button 3</TD>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle> 
      Button 4</TD>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle> 
      Button 5</TD></TR></TBODY></TABLE>

<P>
<TABLE style="BACKGROUND: buttonface" cellSpacing=1>
  <TBODY>
  <TR>
    <TD class=coolButton onaction="alert(event)"><IMG 
      src="movetoicon.gif" align=absMiddle> Button 0</TD>
    <TD class=coolButton tabIndex=1><IMG src="movetoicon.gif" 
      align=absMiddle> Button 1</TD>
    <TD class=coolButton tabIndex=1><IMG src="movetoicon.gif" 
      align=absMiddle> Button 2</TD>
    <TD class=coolButton tabIndex=1 
    onchange="alert('Changed to ' + this.getValue())"><IMG 
      src="movetoicon.gif" align=absMiddle> Button 3</TD>
    <TD class=coolButton tabIndex=1><IMG src="movetoicon.gif" 
      align=absMiddle> Button 4</TD>
    <TD class=coolButton tabIndex=1><IMG src="movetoicon.gif" 
      align=absMiddle> Button 5</TD></TR></TBODY></TABLE>
<SCRIPT>

var cells2 = document.getElementsByTagName("TABLE")[2].rows[0].cells;
for (var i = 0; i < cells2.length; i++)
	createButton(cells2[i]);

cells2[2].setToggle(true);

cells2[3].setToggle(true);
cells2[3].setValue(true, true);	// don't trigger onchange

cells2[4].setEnabled(false);

cells2[5].setEnabled(false);
cells2[5].setToggle(true);
cells2[5].setValue(true, true);	// don't trigger onchange

</SCRIPT>

<P>
<TABLE style="BACKGROUND: buttonface" cellSpacing=1>
  <TBODY>
  <TR>
    <TD class=coolButton tabIndex=1 onaction="alert(event)"><IMG 
      src="favicon.gif" align=absMiddle> Button 0</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif" 
      align=absMiddle> Button 1</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif" 
      align=absMiddle> Button 2</TD>
    <TD class=coolButton tabIndex=1 
    onchange="alert('Changed to ' + this.getValue())"><IMG 
      src="favicon.gif" align=absMiddle> Button 3</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif" 
      align=absMiddle> Button 4</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif" 
      align=absMiddle> Button 5</TD></TR></TBODY></TABLE>
<SCRIPT>

var cells3 = document.getElementsByTagName("TABLE")[3].rows[0].cells;
for (var i = 0; i < cells3.length; i++) {
	createButton(cells3[i]);
	cells3[i].setAlwaysUp(true);
}

cells3[2].setToggle(true);

cells3[3].setToggle(true);
cells3[3].setValue(true, true);	// don't trigger onchange

cells3[4].setEnabled(false);

cells3[5].setEnabled(false);
cells3[5].setToggle(true);
cells3[5].setValue(true, true);	// don't trigger onchange

</SCRIPT>

<P>
<TABLE style="BACKGROUND: buttonface" cellSpacing=1>
  <TBODY>
  <TR>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif" 
      align=absMiddle> Button 0</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif" 
      align=absMiddle> Button 1</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif" 
      align=absMiddle> Button 2</TD></TR></TBODY></TABLE>
<SCRIPT>

var cells4 = document.getElementsByTagName("TABLE")[4].rows[0].cells;

function doRadio() {
	// loop over all the buttons in the radio group
	for (var i = 0; i < cells4.length; i++)
		cells4[i].setValue(this == cells4[i]);	// if the clicked button then set value to true
}

for (var i = 0; i < cells4.length; i++) {
	createButton(cells4[i]);
	//cells4[i].setAlwaysUp(true);
	cells4[i].setToggle(true);
	if (i == 0)
		cells4[i].setValue(true);
	cells4[i].onaction = doRadio;
}
</SCRIPT>