?
<!DOCTYPE html>
<html>
<head>
<title>imgex01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script language="JavaScript">
function ToggleButton(document,checked,label,onclick){
if (!ToggleButton.prototype.over) {
ToggleButton.prototype.over = _ToggleButton_over;
ToggleButton.prototype.out = _ToggleButton_out;
ToggleButton.prototype.click = _ToggleButton_click;
ToggleButton.images = new Array(4);
for (var i = 0; i < 4; i++) {
ToggleButton.images[i] = new Image(ToggleButton.width, ToggleButton.height);
ToggleButton.images[i].src = ToggleButton.imagenames[i];
}
}
this.document=document;
this.checked=checked;
this.highlighted=false;
this.onclick=onclick;
if(typeof this.onclick=="string"){
this.onclick=new Function("state",this.onclick);
}
var index=document.images.length;
document.write(' <a href="about:blank"'+
'onmouseover="document.images['+index+']._tb.over();return true;"'+
'onmouseout="document.images['+index+']._tb.out()"'+
'onclick="document.images['+index+']._tb.click();return false;">');
document.write('<img src="'+ToggleButton.imagenames[this.checked+0]+'"'+
'width='+ToggleButton.width+
'height='+ToggleButton.height+
'border="0" hspace="0" vspace="0" align="absmiddle">');
if(label) document.write(label);
document.write('</a></br>');
this.image=document.images[index];
this.image._tb=this;
}
function _ToggleButton_over(){
this.image.src=ToggleButton.imagenames[this.checked+2];
this.highlighted=true;
}
function _ToggleButton_out(){
this.image.src=ToggleButton.imagenames[this.checked+0];
this.highlighted=false;
}
function _ToggleButton_click(){
this.checked=!this.checked;
this.image.src=ToggleButton.imagenames[this.checked+this.highlighted*2];
if(this.onclick) this.onclick(this.checked);
}
ToggleButton.imagenames=new Array(4);
ToggleButton.imagenames[0]="0.png";
ToggleButton.imagenames[1]="1.png";
ToggleButton.imagenames[2]="2.png";
ToggleButton.imagenames[3]="3.png";
ToggleButton.width=ToggleButton.height=25;
</script>
Optional extras:</br>
<script language="JavaScript">
var tb1=new ToggleButton(document,true,"56X Modem");
var tb2=new ToggleButton(document,false,"Laser Printer",
function(clicked){
alert("printer:"+clicked);
});
var tb3=new ToggleButton(document,false,"Tape Backup Unit",
"alert('Tape backup:'+state)");
</script>
<body>
<form>
<input type="button" value="report button states"
onclick="alert(tb1.checked+'\n'+tb2.checked+'\n'+tb3.checked)">
<input type="button" value="reset buttons"
onclick="if(tb1.checked) tb1.click();
if(tb2.checked) tb2.click();
if(tb3.checked) tb3.click();"">
</form>
</body>
</html>
?
