topical media & game development
#javascript-generator-graphic-button.htm / htm
<!-- 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 -->
<!-- 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 -->
<!-- Original: S.Sampath (s_sampath_29@yahoo.co.in) -->
<!-- Web Site: http://www.geocities.com/s_sampath_29 -->
<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 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<!--\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<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<!--\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<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<!--\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";
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>
<!-- 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 -->
<!-- Original: S.Sampath (s_sampath_29@yahoo.co.in) -->
<!-- Web Site: http://www.geocities.com/s_sampath_29 -->
<form name="frmButtons">
<table width="100%" border="0">
<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>
<input class="clickable" onclick="if(rdButton[0].checked) genCode(1); else if(rdButton[1].checked) genCode(2);else alert('Select a Button style');" type="button" value="Generate Code" name="btnGenerate" />
</td>
</tr>
<tr>
<td>
<textarea name="srcCode" rows="10" cols="60"></textarea>
</td>
</tr>
</tbody>
</table>
<br /><br />
<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>
<table border="0">
<tbody>
<tr>
<td>Normal Button Background </td>
<td>
<select onchange="if(this.value !='') document.frmButtons.btnPreview.style.backgroundColor=this.value;" name="nbkColor">
<option value="" selected="selected">-Select-</option>
<option value=""> -- Standard -- </option>
<option style="BACKGROUND-COLOR: red" value="Red">Red</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: blue" value="Blue">Blue</option>
<option style="BACKGROUND-COLOR: silver" value="Silver">Silver</option>
<option style="BACKGROUND-COLOR: magenta" value="Magenta">Magenta</option>
<option style="BACKGROUND-COLOR: cyan" value="Cyan">Cyan</option>
<option style="BACKGROUND-COLOR: gold" value="Gold">Gold</option>
<option value=""> -- Custom -- </option>
<script>addColors(0);</script>
</select>
</td>
</tr>
<tr>
<td>Normal Text Color </td>
<td>
<select onchange="if(this.value !='') document.frmButtons.btnPreview.style.color=this.value;" name="ntxtColor">
<option value="" selected="selected">-Select-</option>
<option value=""> -- Standard -- </option>
<option style="COLOR: red" value="Red">Red</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: blue" value="Blue">Blue</option>
<option style="COLOR: silver" value="Silver">Silver</option>
<option style="COLOR: magenta" value="Magenta">Magenta</option>
<option style="COLOR: cyan" value="Cyan">Cyan</option>
<option style="COLOR: gold" value="Gold">Gold</option>
<option value=""> -- Custom -- </option>
<script>addColors(1);</script>
</select>
</td>
</tr>
<tr>
<td>Normal Text Font </td>
<td>
<select onchange="if (this.value != '') document.frmButtons.btnPreview.style.fontFamily=this.value;" name="ntxtFont">
<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>
<select onchange="if (this.value != '') document.frmButtons.btnPreview.style.fontSize=this.value;" name="ntxtSize">
<option value="" selected="selected">Select</option>
<option value="">-Points-</option>
<option style="FONT-SIZE: 8pt" value="8pt">8pt</option>
<option style="FONT-SIZE: 9pt" value="9pt">9pt</option>
<option style="FONT-SIZE: 10pt" value="10pt">10pt</option>
<option style="FONT-SIZE: 11pt" value="11pt">11pt</option>
<option style="FONT-SIZE: 12pt" value="12pt">12pt</option>
<option value="">-Pixels-</option>
<option style="FONT-SIZE: 9px" value="9px">9px</option>
<option style="FONT-SIZE: 10px" value="10px">10px</option>
<option style="FONT-SIZE: 11px" value="11px">11px</option>
<option style="FONT-SIZE: 12px" value="12px">12px</option>
<option style="FONT-SIZE: 13px" value="13px">13px</option>
<option style="FONT-SIZE: 14px" value="14px">13px</option>
</select>
</td>
</tr>
<tr>
<td>Normal Text Weight </td>
<td>
<select onchange="if (this.value != '') document.frmButtons.btnPreview.style.fontWeight=this.value;" name="ntxtBold">
<option value="" selected="selected">Select</option>
<option style="FONT-WEIGHT: normal" value="normal">normal</option>
<option style="FONT-WEIGHT: bold" value="bold">bold</option>
</select>
</td>
</tr>
<tr>
<td>Button Background on Focus</td>
<td>
<select onchange="if (this.value != '') document.frmButtons.btnPreview.style.backgroundColor=this.value;" name="fbkColor">
<option value="" selected="selected">-Select-</option>
<option value=""> -- Standard -- </option>
<option style="BACKGROUND-COLOR: red" value="Red">Red</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: blue" value="blue">Blue</option>
<option style="BACKGROUND-COLOR: silver" value="Silver">Silver</option>
<option style="BACKGROUND-COLOR: magenta" value="Magenta">Magenta</option>
<option style="BACKGROUND-COLOR: cyan" value="Cyan">Cyan</option>
<option style="BACKGROUND-COLOR: gold" value="Gold">Gold</option>
<option value=""> -- Custom -- </option>
<script>addColors(0);</script>
</select>
</td>
</tr>
<tr>
<td>Text Color on Focus</td>
<td>
<select onchange="if (this.value != '') document.frmButtons.btnPreview.style.color=this.value;" name="ftxtColor">
<option value="" selected="selected">-Select-</option>
<option value=""> -- Standard -- </option>
<option style="COLOR: red" value="Red">Red</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: blue" value="Blue">Blue</option>
<option style="COLOR: silver" value="Silver">Silver</option>
<option style="COLOR: magenta" value="Magenta">Magenta</option>
<option style="COLOR: cyan" value="Cyan">Cyan</option>
<option style="COLOR: gold" value="Gold">Gold</option>
<option value=""> -- Custom -- </option>
<script>addColors(1);</script>
</select>
</td>
</tr>
<tr>
<td>Text Font on Focus</td>
<td>
<select onchange="if (this.value != '') document.frmButtons.btnPreview.style.fontFamily=this.value;" name="ftxtFont">
<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>
<select onchange="if (this.value != '') document.frmButtons.btnPreview.style.fontSize=this.value;" name="ftxtSize">
<option value="" selected="selected">Select</option>
<option value="">-Points-</option>
<option value="8pt">8pt</option>
<option value="9pt">9pt</option>
<option value="10pt">10pt</option>
<option value="11pt">11pt</option>
<option value="12pt">12pt</option>
<option value="">-Pixels-</option>
<option value="9px">9px</option>
<option value="10px">10px</option>
<option value="11px">11px</option>
<option value="12px">12px</option>
<option value="13px">13px</option>
<option value="14px">14px</option>
</select>
</td>
</tr>
<tr>
<td>Text Weight on Focus</td>
<td>
<select onchange="if (this.value != '') document.frmButtons.btnPreview.style.fontWeight=this.value;" name="ftxtBold">
<option value="" selected="selected">Select</option>
<option style="FONT-WEIGHT: normal" value="normal">normal</option>
<option style="FONT-WEIGHT: bold" value="bold">bold</option>
</select>
</td>
</tr>
<tr>
<td>Button Name</td>
<td><input maxlength="12" size="12" value="" name="txtBtnName" /></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 colspan="2">
<input class="clickable" onclick="genCustCode()" type="button" value="Generate Code" />
</td>
</tr>
</tbody>
</table>
<textarea id="txt2" name="txtCustCode" rows="10" cols="60"></textarea>
</form>
<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: 21.47 KB -->
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
