Graphical Form Radio Buttons and Checkboxes

[Total: 0    Average: 0/5]

This example shows how to have images replace the functionality of radio button and checkbox forms.

Head Code:

<SCRIPT language=JavaScript>
<!--
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

function initialize() {
psv  = new checkBox('myForm1','psvImg','yes','no');
tree = new checkBox('myForm1','treeImg','yes','no');
dome = new radio('myForm1','domeImg',3,'Land');
}

function reset() {
psv = new checkBox('myForm1','psvImg','yes','no');
tree = new checkBox('myForm1','treeImg','yes','no');
dome = new radio('myForm1','domeImg',3,'Land');
dome.change(0,'Land');
changeImage('myForm1', 'psvImg', 'checkbox0');
changeImage('myForm1', 'treeImg', 'checkbox0');
}

function loadImage(imgObj,imgSrc) {
eval(imgObj+' = new Image()');
eval(imgObj+'.src = "'+imgSrc+'"');
}

loadImage('button0','http://www.js-examples.com/js/images/pic1.gif');
loadImage('button1','http://www.js-examples.com/js/images/pic2.gif');
loadImage('radiobutton0','http://www.js-examples.com/js/images/pic1.gif');
loadImage('radiobutton1','http://www.js-examples.com/js/images/pic2.gif');
loadImage('checkbox0','http://www.js-examples.com/js/images/pic1.gif');
loadImage('checkbox1','http://www.js-examples.com/js/images/pic2.gif');
loadImage('reset0','http://www.js-examples.com/js/images/pic1.gif');
loadImage('reset1','http://www.js-examples.com/js/images/pic2.gif');

function submitForm() {
      var str  = "Option #1 = " + dome.value + "n";
  str += "Option #2 = " + psv.value  + "n";
  str += "Option #3 = " + tree.value + "n";
  alert(str);
}

function changeImage(layer,imgName,imgObj) {
if (ns4 && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
else document.images[imgName].src = eval(imgObj+".src");
}

function radio(layer,imgNames,length,defaultValue) {
this.layer = layer;
this.imgNames = imgNames;
this.length = length;
this.change = radioChange;
this.value = (defaultValue)? defaultValue : "undefined";
}

function radioChange(index,value) {
this.value = value;
for (var i=0; i<this.length; i++) changeImage(this.layer,this.imgNames+i,'radiobutton0');
changeImage(this.layer,this.imgNames+index,'radiobutton1');
}

function checkBox(layer,imgName,trueValue,falseValue,defaultToTrue) {
this.layer = layer;
this.imgName = imgName;
this.trueValue = trueValue;
this.falseValue = falseValue;
this.state = (defaultToTrue) ? 1 : 0;
this.value = (this.state) ? this.trueValue : this.falseValue;
this.change = checkBoxChange;
}

function checkBoxChange() {
this.state = (this.state) ? 0 : 1;
this.value = (this.state) ? this.trueValue : this.falseValue;
changeImage(this.layer,this.imgName,'checkbox'+this.state);
}

function fetch(url) { opener.location = url; }
function Finished() { window.close(); }

//-->
</SCRIPT>

<STYLE type=text.css>
<!--
#myForm1 {position: relative;}
-->
</STYLE>

Init Code:

initialize();

Body Code:

<a href="javascript:initialize()">invoke the initailize routine</a>
(normally this routine would be called on the body onload event!)
<DIV id=myForm1>
<TABLE cellSpacing=0 cellPadding=3 border=0>
  <TBODY>
  <TR>
    <TD align=middle colSpan=2><FONT size=+2>A few options to choose from:</FONT>
      <HR>
       </TD></TR>
  <TR>
    <TD colSpan=2><FONT size=+1>Option #1 (Select 1)</FONT><BR></TD></TR>
  <TR>
    <TD><A href="javascript:dome.change(0,'Value A')"><IMG height=20 alt="" 
      src="http://www.js-examples.com/js/images/pic1.gif" width=20 
      border=0 name=domeImg0></A></TD>
    <TD>Value A</TD></TR>
  <TR>
    <TD><A href="javascript:dome.change(1,'Value B')"><IMG height=20 alt="" 
      src="http://www.js-examples.com/js/images/pic1.gif" width=20 
      border=0 name=domeImg1></A></TD>
    <TD>Value B</TD></TR>
  <TR>
    <TD><A href="javascript:dome.change(2,'Value C')"><IMG height=20 alt="" 
      src="http://www.js-examples.com/js/images/pic1.gif" width=20 
      border=0 name=domeImg2></A></TD>
    <TD>Value C</TD></TR>
  <TR>
    <TD colSpan=2><BR><FONT size=+1>Option #2 (Select Many)</FONT><BR></TD></TR>
  <TR>
    <TD><A href="javascript:psv.change()"><IMG height=20 alt="" 
      src="http://www.js-examples.com/js/images/pic1.gif" width=20 border=0 
      name=psvImg></A></TD>
    <TD>Value A</TD></TR>
  <TR>
    <TD><A href="javascript:tree.change()"><IMG height=20 alt="" 
      src="http://www.js-examples.com/js/images/pic1.gif" width=20 border=0 
      name=treeImg></A></TD>
    <TD>Value B</TD></TR>
  <TR>
    <TD align=right colSpan=2><BR><A 
      onmouseup="changeImage('myForm1','submitImg','button0')" 
      onmousedown="changeImage('myForm1','submitImg','button1')" 
      onmouseout="changeImage('myForm1','submitImg','button0')" 
      href="javascript:submitForm()"><IMG height=30 alt=Submit 
      src="http://www.js-examples.com/js/images/pic1.gif" width=85 vspace=10 
      border=0 name=submitImg></A> <A 
      onmouseup="changeImage('myForm1','resetImg','reset0')" 
      onmousedown="changeImage('myForm1','resetImg','reset1')" 
      onmouseout="changeImage('myForm1','resetImg','reset0')" 
      href="javascript:reset()"><IMG height=30 alt=Reset 
      src="http://www.js-examples.com/js/images/pic1.gif" width=85 
      vspace=10 border=0 name=resetImg></A> </TD></TR></TBODY></TABLE></DIV>
<FORM><INPUT onclick=Finished() type=button value="Close Window">
</FORM>

Times Viewed: 6

Leave a Reply

Your email address will not be published. Required fields are marked *