Custom Code

-Back-

Toggle Button JavaScript

Date Added: May 18, 2003

Platforms: NS: all - IE: all

Author: Bryan Gamble (bryan@bmgamble.com)

Homepage: bmgamble.com

Description:
Put a new look to plain check boxes. Move you cursor over an item and it give you a nice interactive feeling.

Example:

Menu Item:

The Code:

Cut and paste this code by pressing "highlight all":
            <SCRIPT LANGUAGE="JavaScript1.1"> /*********************************************************************** FUNCTION: toggleButton DESCR: Creates a toggleButton object and outputs the required <A> and <IMG> tags into the document. PARAMETERS: document - Document object the button will be created in checked - Booloean that says whether the button is inititally checked label - Optional string that specifies text to appear after the the button onclick - An optional function to be called when the toggle button is clicked ************************************************************************/ function toggleButton(document, checked, label, onclick) { if (document == null) return; 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]; }//end for }//end if // Save some of the arguments we were passed this.document = document; this.checked = checked; // Remember that the mouse is not currently on top of us this.highlighted = false; // Save the onclick argument to be called when the button is clicked // If not already a function, attempt to convert to a function this.onclick = onclick; if(typeof this.onclick == "string") this.onclick = new Function("state", this.onclick); // Figure out what entry in the document.images[] aray the images // for this checkbox will be stored at var index = document.images.length; // Output HTML code document.write(' <A HREF= "" ' + ' 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=O HSPACE=O VSPACE=0 ALIGN="absmiddle">'); if (label) document.write(label); document.write('</A>'); // Save a reference to the Image object that it created in the toggleButton object this.image = document.images[index]; // Make a link in the other direction: from Image object to this toggleButton object. this.image._tb = this; }//end toggleButton function /********************************************** FUNCTION: _toggleButton_over DESCR: This becomes the over() method **********************************************/ function _toggleButton_over() { // Change the image and remember that we are higlighted this.image.src = toggleButton.imagenames[this.checked + 2]; this.higlighted = true; } /********************************************** FUNCTION: _toggleButton_out DESCR: This becomes the out() method **********************************************/ function _toggleButton_out() { // Change the image and remember that we are not higlighted this.image.src = toggleButton.imagenames[this.checked + 0]; this.higlighted = false; } /********************************************** FUNCTION: _toggleButton_click DESCR: This becomes the click() method **********************************************/ function _toggleButton_click() { // Toggle the state of the button, change the image, and call the // onclick method, if it was specified for this toggleButton this.checked = !this.checked; this.image.src = toggleButton.imagenames[this.checked+this.highlighted*2]; if (this.onclick) this.onclick(this.checked); } // Initialize static class properties that describe the checkbox images // MAKE SURE IMAGES ARE IN SAME DIRECTORY AS .html FILE toggleButton.imagenames = new Array(4); // Create an array toggleButton.imagenames[0] = "togglebutton0.gif"; // unchecked box toggleButton.imagenames[1] = "togglebutton1.gif"; // box with check mark toggleButton.imagenames[2] = "togglebutton2.gif"; // unchecked but highlighted toggleButton.imagenames[3] = "togglebutton3.gif"; // checked and highlighted toggleButton.width = 18 toggleButton.height = 15; </SCRIPT> <BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>  <B>Menu Item:</B><BR> <SCRIPT LANGUAGE="JavaScript1.1">  </SCRIPT>  <FORM> <INPUT TYPE="button" VALUE="Report Buttons" onClick="alert('Item One = ' + tb1.checked + '\n' + 'Item Two = ' + tb2.checked + '\n' + 'Item Three = ' + tb3.checked + '\n' + 'Item Four = ' + tb4.checked + '\n' + 'Item Five = ' + tb5.checked + '\n' + 'Item Six = ' + tb6.checked + '\n')"> <INPUT TYPE="button" VALUE="Reset Buttons" onClick=" if (tb1.checked) tb1.click(); if (tb2.checked) tb2.click(); if (tb3.checked) tb3.click(); if (tb4.checked) tb4.click(); if (tb5.checked) tb5.click(); if (tb6.checked) tb6.click();"> </FORM> </BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE> 

-Back-