Graphic Buttons Generator

JavaScriptSource Staff Sep 7, 2004

The JavaScript Source: Miscellaneous: Graphic Buttons Generator

Use this script to create your own graphic buttons, you can create rollover effects, choose colors and more.

Graphic Buttons

The JavaScript Source: Generators: Graphic Buttons Generator

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<HEAD>        <style type="text/css">    </style>  <script language="JavaScript">  \n</Sc"+"ript"+">";  			value+="\n\n<Sty"+"le type='text/css'>\n\n</St"+"yle>\n";  			value+="\n\n\n//Paste the HTML code in the BODY part of your page";  			value+="\n<in"+"put type='button' name='btnName' class='clickable' value='Caption' onMouseOver='change(this,\"ButtonGR\")' onMouseOut='change(this,\"ButtonRG\")' id='ButtonRG' onClick='alert(\"Handle Click Event\");'/>";  			value+="\n//Change the Button name and caption to suit your needs";  		}  	}  	else  	{  		//Generate code for ButtonBY  		with (document.frmButtons.srcCode)  		{  			value="";  			value="//Paste this code in the HEAD part of your page";  			value+="\n<"+"Sc"+"ript language='JavaScript'>\n\n</Sc"+"ript"+">";  			value+="\n\n<Sty"+"le type='text/css'>\n\n</St"+"yle>\n";  			value+="\n\n\n//Paste the HTML code in the BODY part of your page";  			value+="\n<in"+"put type='button' name='btnName' class='clickable' value='Caption' onMouseOver='change(this,\"ButtonYB\")' onMouseOut='change(this,\"ButtonBY\")' id='ButtonBY' onClick='alert(\"Handle Click Event\");'/>";  			value+="\n//Change the Button name and caption to suit your needs";  		}  	}  }  function genCustCode()  {  	with (document.frmButtons.txtCustCode)  	{  		id="txt2v";  		value="";  		value="//Paste this code in the HEAD part of your page";  		value+="\n<"+"Sc"+"ript language='Javascript'>\n\n</Sc"+"ript"+">";  		value+="\n\n<Sty"+"le type='text/css'>\n\n</St"+"yle>\n";  		value+="\n\n\n//Paste the HTML code in the BODY part of your page";  		value+="\n<in"+"put type='button' class='clickable' name='"+document.frmButtons.txtBtnName.value+"' value='"+document.frmButtons.txtBtnCaption.value+"' onMouseOver='change(this,\"btnFocus\")' onMouseOut='change(this,\"normBtn\")' id='normBtn' onClick='alert(\"Handle Click Event\");'/>";  	}  }  -->  </script>  </HEAD>        <BODY>        	<h1>Graphic Buttons</h1>  	<form name="frmButtons">  		<table  width="100%" border="0">  			<tr>  				<td><font face="Arial" size="3">Select the type of button you would like to have</font></td>  			</tr>  			<tr>  				<td>  					<input type="radio" name="rdButton" value="ButtonRG"/> <input type="button" class="clickable" id="ButtonRG" onMouseOver="change(this,'ButtonGR')" onMouseOut="change(this,'ButtonRG')" value="Button 1" onClick="alert('Handle Click Event');"/>  				</td>  			</tr>  			<tr>  				<td>  					<input type="radio" name="rdButton" value="ButtonBY"/> <input type="button" class="clickable" id="ButtonBY" onMouseOver="change(this,'ButtonYB')" onMouseOut="change(this,'ButtonBY')" value="Button 2" onClick="alert('Handle Click Event');"/>  				</td>  			</tr>  			<tr>  				<td>  					<input type="button" class="clickable" name="btnGenerate" value="Generate Code" onClick="if(rdButton[0].checked) genCode(1); else genCode(2);"/>  				</td>  			</tr>  			<tr>  				<td>  					<textarea cols="60" rows="10" name="srcCode"></textarea>  				</td>  			</tr>  		</table>  		<br/>  		<br/>  		<font size="3" face="Helvetica"><b>You can also specify custom colors for Button Rollovers</b></font>  		<table border="1">  			<tr>  				<td>Normal Button Background </td>  				<td>  					<input type="text" name="nbkColor" size="10" maxlength="12"/> <sup>*</sup>Specify Standard colors like Red,Green,etc or Numerical values preceded by #. (Ex : #FFFFFF)  				</td>  			</tr>  			<tr>  				<td>Normal Text Color </td>  				<td>  					<input type="text" name="ntxtColor" size="10" maxlength="12"/><sup>*</sup>Specify Standard colors like Red,Green,etc or Numerical values preceded by #. (Ex : #FFFFFF)  				</td>  			</tr>  			<tr>  				<td>Button Background on Focus</td>  				<td>  					<input type="text" name="fbkColor" size="10" maxlength="12"/><sup>*</sup>Specify Standard colors like Red,Green,etc or Numerical values preceded by #. (Ex : #FFFFFF)  				</td>  			</tr>  			<tr>  				<td>Text Color on Focus</td>  				<td>  					<input type="text" name="ftxtColor" size="10" maxlength="12"/><sup>*</sup>Specify Standard colors like Red,Green,etc or Numerical values 	preceded by #. (Ex : #FFFFFF)  				</td>  			</tr>  			<tr>  				<td>Button Name</td>  				<td>  					<input type="text" name="txtBtnName" size="12" maxlength="12"/>  				</td>  			</tr>  			<tr>  				<td>Button Caption</td>  				<td>  					<input type="text" name="txtBtnCaption" size="12" maxlength="25"/>  				</td>  			</tr>  			<tr>  				<td colspan="2">  					<input type="button" class="clickable" value="Generate Code" onClick="genCustCode()">  				</td>  			</tr>  		</table>  		<textarea id="txt2" cols="60" rows="10" name="txtCustCode"></textarea>	  	</form>  //Paste this code in the HEAD part of your page  <Script language='Javascript'>    </Script>    <Style type='text/css'>    </Style>    <p><center>  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>  </center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Graphic Buttons Generator

Graphic Buttons

Leave a Response

Attention JavaScript Coders

Go Deeper

Normal Button Background	^*Specify Standard colors like Red,Green,etc or Numerical values preceded by #. (Ex : #FFFFFF)
Normal Text Color	^*Specify Standard colors like Red,Green,etc or Numerical values preceded by #. (Ex : #FFFFFF)
Button Background on Focus	^*Specify Standard colors like Red,Green,etc or Numerical values preceded by #. (Ex : #FFFFFF)
Text Color on Focus	^*Specify Standard colors like Red,Green,etc or Numerical values preceded by #. (Ex : #FFFFFF)
Button Name
Button Caption