Home
Generators
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!!!
<!-- TWO STEPS TO INSTALL GRAPHIC BUTTONS GENERATOR:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<style type="text/css">
<!--
.clickable{
cursor:hand;
}
td{
font-family:Helvetica,Sans Serif;
font-size:9pt;
}
#txt2{
visibility:hidden;
}
#txtv{
visibility:visible;
}
#ButtonRG{
background-color:lightgreen;
color:black;
}
#ButtonGR{
background-color:white;
color:red;
}
#ButtonBY{
background-color:lightblue;
color:black;
}
#ButtonYB{
background-color:yellow;
color:red;
}
-->
</style>
<script language="JavaScript">
<!--
function change(obj,nid)
{
obj.id=nid;
}
function genCode(val)
{
document.frmButtons.srcCode.value="Hello";
if(val==1)
{
//Generate code for ButtonRG
with (document.frmButtons.srcCode)
{
value="";
value="//Paste this code in the HEAD part of your page";
value+="\n<"+"Sc"+"ript language='JavaScript'>\n<!--\nfunction change(obj,nid)\n{\n\tobj.id=nid;\n}\n-->\n</Sc"+"ript"+">";
value+="\n\n<Sty"+"le type='text/css'>\n<!--\n#ButtonRG{\n\tbackground-color:lightgreen;\n\tcolor:black;\n\t}\n";
value+="#ButtonGR{\n\tbackground-color:white;\n\tcolor:red;\n\t}\n";
value+=".clickable{\n\tcursor:hand;\n\t}\n";
value+="-->\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<!--\nfunction change(obj,nid)\n{\n\tobj.id=nid;\n}\n-->\n</Sc"+"ript"+">";
value+="\n\n<Sty"+"le type='text/css'>\n<!--\n#ButtonBY{\n\tbackground-color:lightblue;\n\tcolor:black;\n\t}\n";
value+="#ButtonYB{\n\tbackground-color:yellow;\n\tcolor:red;\n\t}\n";
value+=".clickable{\n\tcursor:hand;\n\t}\n";
value+="-->\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<!--\nfunction change(obj,nid)\n{\n\tobj.id=nid;\n}\n-->\n</Sc"+"ript"+">";
value+="\n\n<Sty"+"le type='text/css'>\n<!--\n#normBtn{\n\tbackground-color:"+document.frmButtons.nbkColor.value+";\n\tcolor:"+document.frmButtons.ntxtColor.value+";\n\t}\n";
value+="#btnFocus{\n\tbackground-color:"+document.frmButtons.fbkColor.value+";\n\tcolor:";
value+=document.frmButtons.ftxtColor.val+";\n\t}\n";
value+=".clickable{\n\tcursor:hand;\n\t}\n";
value+="-->\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>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<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'>
<!--
function change(obj,nid)
{
obj.id=nid;
}
-->
</Script>
<Style type='text/css'>
<!--
#normBtn{
background-color:555576;
color:888888;
}
#btnFocus{
background-color:888888;
color:undefined;
}
.clickable{
cursor:hand;
}
-->
</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>
<!-- Script Size: 8.04 KB --> Did you use this script? Do you like this site? Please link to us!
Comments feed