The JavaScript Source: Generators: Graphic Buttons Generator 2

Home

Graphic Buttons Generator 2

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


  <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<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</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</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>     <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> 
Did you use this script?  Do you like this site?  Please link to us!

Add a comment, suggestion, or correction

Sign up for the JavaScript Weekly

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Whitepapers and eBooks

Microsoft Articles: Visual Studio 2010
Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications
Microsoft Whitepaper: How Windows Server 2008 R2 Helps Optimize IT and Save You Money
Adobe Article: Java Developers Finding a Home at Adobe Flex
IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking
Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3--New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies
Video: Microsoft Partner Program Benefits
Video: Windows Azure Debugging Tips
SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports

IBM Webcast: Speed Business Innovation with Reduced Cost and Risk
Video: Deploy Applications on Windows Azure
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Download: Microsoft Visual Studio 2010 Beta 2
Downloads & Free Trials: Microsoft's New Efficiency Resource Center
Get the Windows 7 SDK

Free Trial: Red Gate SQL Backup Pro 6
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products
All About Botnets

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES