Graphic Buttons Generator 2

JavaScriptSource Staff Nov 22, 2004

This new button generator allows users to specify more properties and sports a preview button that lets you see the results on the fly.

Select the type of button you would like to have

You can also specify custom Button Rollovers

Normal Button Background
Normal Text Color
Normal Text Font
Normal Text Size
Normal Text Weight
Button Background on Focus
Text Color on Focus
Text Font on Focus
Text Size on Focus
Text Weight on Focus
Button Name
Button Caption	^*Precede the letter or number with an Ampersand (&), if you want it as a shortcut key.

The JavaScript Source: Generators: Graphic Buttons Generator 2

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 2:

1.  Copy the coding into the HEAD of your HTML document

2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

<!--

.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>

<!--

function addColors(foreColor)

{

var clr=new Array("aa","bb","cc","dd","ee","ff");

var red=0,green=1,blue=2;

if(foreColor == 0)

{

for(red=0;red<6;red++)

{

for(green=0;green<6;green++)

{

for(blue=0;blue<6;blue++)

{

colorVal="#"+clr[red]+clr[green]+clr[blue];

document.write("<option value='"+colorVal+"' style='background-color:"+colorVal+"'>"+colorVal+"</option>");

}

else

{

for(red=0;red<6;red++)

{

for(green=0;green<6;green++)

{

for(blue=0;blue<6;blue++)

{

colorVal="#"+clr[red]+clr[green]+clr[blue];

document.write("<option value='"+colorVal+"' style='color:"+colorVal+"'><font color='"+colorVal+"'>"+colorVal+"</font></option>");

}

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\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<but"+"ton name='btnName' class='clickable' onMouseOver='change(this,\"ButtonGR\")' onMouseOut='change(this,\"ButtonRG\")' id='ButtonRG' onClick='alert(\"Handle Click Event\");' accessKey='C'><u"+"><b>C</b></u>aption"+"</but"+"ton>";

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#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<but"+"ton name='btnName' class='clickable'  onMouseOver='change(this,\"ButtonYB\")' onMouseOut='change(this,\"ButtonBY\")' id='ButtonBY' onClick='alert(\"Handle Click Event\");' accessKey='C'><u"+"><b>C</b></u>aption"+"</but"+"ton>";

value+="\n//Change the Button name and caption to suit your needs";

}

function genCustCode()

{

var temp="";

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#normBtn{\n\tbackground-color:"+document.frmButtons.nbkColor.value+";\n\tcolor:"+document.frmButtons.ntxtColor.value+";\n\t";

if(document.frmButtons.ntxtFont.value != "")

{

value+="font-family:"+document.frmButtons.ntxtFont.value+";\n\t";

}

if(document.frmButtons.ntxtSize.value != "")

{

value+="font-size:"+document.frmButtons.ntxtSize.value+";\n\t";

}

if(document.frmButtons.ntxtBold.value != "")

{

value+="font-weight:"+document.frmButtons.ntxtBold.value+";\n\t";

}

value+="}\n";

value+="#btnFocus{\n\tbackground-color:"+document.frmButtons.fbkColor.value+";\n\tcolor:";

value+=document.frmButtons.ftxtColor.value+";\n\t";

if(document.frmButtons.ftxtFont.value != "")

{

value+="font-family:"+document.frmButtons.ftxtFont.value+";\n\t";

}

if(document.frmButtons.ftxtSize.value != "")

{

value+="font-size:"+document.frmButtons.ftxtSize.value+";\n\t";

}

if(document.frmButtons.ftxtBold.value != "")

{

value+="font-weight:"+document.frmButtons.ftxtBold.value+";\n\t";

}

value+="}\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<but"+"ton class='clickable' name='"+document.frmButtons.txtBtnName.value+"' onMouseOver='change(this,\"btnFocus\")' onMouseOut='change(this,\"normBtn\")' id='normBtn' onClick='alert(\"Handle Click Event\");'";

temp=addShortcutCode();

value+=temp;

}

document.frmButtons.txtCustCode.focus();

}

function replace(string,text,by)

{

// Replaces text with by in string

//Taken from "http://developer.irt.org/script/771.htm"

//Site for developer's questions regarding Javascript

var strLength = string.length, txtLength = text.length;

if ((strLength == 0) || (txtLength == 0)) return string;

var i = string.indexOf(text);

if ((!i) && (text != string.substring(0,txtLength))) return string;

if (i == -1) return string;

var newstr = string.substring(0,i) + by;

if (i+txtLength < strLength)

newstr += replace(string.substring(i+txtLength,strLength),text,by);

return newstr;

}

function addShortcutCode()

{

var caption,value="",temp="";

var i=0,j=0,len,ch;

caption=document.frmButtons.txtBtnCaption.value;

len=caption.length;

if(caption.indexOf('&')!=-1)

{

i=caption.indexOf('&');

value=" accessKey='"+caption.charAt(i+1)+"'>";

ch=caption.charAt(i+1);

temp=replace(caption,"&","");

caption=temp;

j=caption.indexOf(ch);

if(j == 0)

{

value+="<u><b>"+ch+"</b></u>"+caption.substring(j+1)+"</but"+"ton>";

}

else

{

value+=caption.substring(0,j)+"<b><u>"+ch+"</b></u>"+caption.substring(j+1)+"</but"+"ton>";

}

return value;

}

else

{

value=">"+caption+"</but"+"ton>";

return value;

}

-->

</script>

</HEAD>

<BODY>

<tbody>

<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" value="ButtonRG" name="rdButton" /><button class="clickable" id="ButtonRG" onmouseover="change(this,'ButtonGR');" accesskey="1" onclick="alert('Handle Click Event');" onmouseout="change(this,'ButtonRG');">Button <u><b>1</b></u></button>

</td>

</tr>

<tr>

<td>

<input type="radio" value="ButtonBY" name="rdButton" /><button class="clickable" id="ButtonBY" onmouseover="change(this,'ButtonYB')" accesskey="2" onclick="alert('Handle Click Event');" onmouseout="change(this,'ButtonBY')">Button <u><b>2</b></u></button>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</tbody>

</table>

<font face="Helvetica" size="3"><b>You can also specify custom Button Rollovers</b></font>

<button class="clickable" id="btnPreview" onclick="alert('Handle Click Event');" name="btnPreview">Preview</button>

<tbody>

<tr>

<td>Normal Button Background </td>

<td>

<option value="" selected="selected">-Select-</option>

<option value=""> -- Standard -- </option>

<option style="BACKGROUND-COLOR: orange" value="Orange">Orange</option>

<option style="BACKGROUND-COLOR: yellow" value="Yellow">Yellow</option>

<option style="BACKGROUND-COLOR: lightgreen" value="LightGreen">Green</option>

<option style="BACKGROUND-COLOR: black" value="Black">Black</option>

<option style="BACKGROUND-COLOR: white" value="White">White</option>

<option style="BACKGROUND-COLOR: silver" value="Silver">Silver</option>

<option style="BACKGROUND-COLOR: magenta" value="Magenta">Magenta</option>

<option value=""> -- Custom -- </option>

</select>

</td>

</tr>

<tr>

<td>Normal Text Color </td>

<td>

<option value="" selected="selected">-Select-</option>

<option value=""> -- Standard -- </option>

<option style="COLOR: orange" value="Orange">Orange</option>

<option style="COLOR: yellow" value="Yellow">Yellow</option>

<option style="COLOR: lightgreen" value="LightGreen">Green</option>

<option style="COLOR: black" value="Black">Black</option>

<option style="COLOR: white" value="White">White</option>

<option style="COLOR: silver" value="Silver">Silver</option>

<option style="COLOR: magenta" value="Magenta">Magenta</option>

<option value=""> -- Custom -- </option>

</select>

</td>

</tr>

<tr>

<td>Normal Text Font </td>

<td>

<option value="" selected="selected">--Select--</option>

<option style="FONT-FAMILY: Arial,Sans Serif" value="Arial">Arial</option>

<option style="FONT-FAMILY: Courier" value="Courier">Courier</option>

<option style="FONT-FAMILY: Helvetica,Sans Serif" value="Helvetica">Helvetica</option>

<option style="FONT-FAMILY: Verdana" value="Verdana">Verdana</option>

<option style="FONT-FAMILY: Times New Roman" value="Times New Roman">Times New Roman</option>

</select>

</td>

</tr>

<tr>

<td>Normal Text Size </td>

<td>

<option value="" selected="selected">Select</option>

<option value="">-Points-</option>

<option value="">-Pixels-</option>

</select>

</td>

</tr>

<tr>

<td>Normal Text Weight </td>

<td>

<option value="" selected="selected">Select</option>

<option style="FONT-WEIGHT: normal" value="normal">normal</option>

</select>

</td>

</tr>

<tr>

<td>Button Background on Focus</td>

<td>

<option value="" selected="selected">-Select-</option>

<option value=""> -- Standard -- </option>

<option style="BACKGROUND-COLOR: orange" value="Orange">Orange</option>

<option style="BACKGROUND-COLOR: yellow" value="Yellow">Yellow</option>

<option style="BACKGROUND-COLOR: lightgreen" value="LightGreen">Green</option>

<option style="BACKGROUND-COLOR: black" value="Black">Black</option>

<option style="BACKGROUND-COLOR: white" value="White">White</option>

<option style="BACKGROUND-COLOR: silver" value="Silver">Silver</option>

<option style="BACKGROUND-COLOR: magenta" value="Magenta">Magenta</option>

<option value=""> -- Custom -- </option>

</select>

</td>

</tr>

<tr>

<td>Text Color on Focus</td>

<td>

<option value="" selected="selected">-Select-</option>

<option value=""> -- Standard -- </option>

<option style="COLOR: orange" value="Orange">Orange</option>

<option style="COLOR: yellow" value="Yellow">Yellow</option>

<option style="COLOR: lightgreen" value="LightGreen">Green</option>

<option style="COLOR: black" value="Black">Black</option>

<option style="COLOR: white" value="White">White</option>

<option style="COLOR: silver" value="Silver">Silver</option>

<option style="COLOR: magenta" value="Magenta">Magenta</option>

<option value=""> -- Custom -- </option>

</select>

</td>

</tr>

<tr>

<td>Text Font on Focus</td>

<td>

<option value="" selected="selected">--Select--</option>

<option style="FONT-FAMILY: Arial,Sans Serif" value="Arial">Arial</option>

<option style="FONT-FAMILY: Courier" value="Courier">Courier</option>

<option style="FONT-FAMILY: Helvetica,Sans Serif" value="Helvetica">Helvetica</option>

<option style="FONT-FAMILY: Verdana" value="Verdana">Verdana</option>

<option style="FONT-FAMILY: Times New Roman" value="Times New Roman">Times New Roman</option>

</select>

</td>

</tr>

<tr>

<td>Text Size on Focus</td>

<td>

<option value="" selected="selected">Select</option>

<option value="">-Points-</option>

<option value="">-Pixels-</option>

</select>

</td>

</tr>

<tr>

<td>Text Weight on Focus</td>

<td>

<option value="" selected="selected">Select</option>

<option style="FONT-WEIGHT: normal" value="normal">normal</option>

</select>

</td>

</tr>

<tr>

<td>Button Name</td>

</tr>

<tr>

<td>Button Caption</td>

<td>

<input maxlength="25" size="12" value="" name="txtBtnCaption" /> <font color="#ff0000"><sup>*</sup>Precede the letter or number with an Ampersand (&), if you want it as a shortcut key.</font>

</td>

</tr>

<tr>

</td>

</tr>

</tbody>

</table>

</form>

<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 2

Leave a Response

Attention JavaScript Coders

Go Deeper