<title>Web Badge Maker on yoursite.com
</title> body {text-align: center; font-family: verdana; font-size: 10pt; background-color: #ccffcc;}
a{color: blue;}
td{text-align: left;}
input{width: 100px;}
.preview{width: 100px; border: 1px solid black;}
</style>
<SCRIPT LANGUAGE="Javascript" SRC="http://pksml.net/button/ColorPicker2.js"></SCRIPT> <SCRIPT LANGUAGE="Javascript" SRC="http://pksml.net/button/ext_site.js"></SCRIPT> </head>
<h1>JavaScript + PHP Web Badge Maker
</h1>
<table style="" cellspacing="5"> <form action="javascript:handler(document.getElementById('myform'));" name="myform" id="myform"> </tr>
<td><input type="text" id="leftText" name="leftText" value="RSS" onblur="document.getElementById('prevL').innerHTML = this.value.toUpperCase();"></td> <td><input type="text" id="rightText" name="rightText" value="VALID" onblur="document.getElementById('prevR').innerHTML = this.value.toUpperCase();"></td> </tr>
</tr>
<td><input type="text" id="leftTextColor" name="leftTextColor" value="ffffff" onblur="document.getElementById('prevL').style.color = this.value;"> <A HREF="#" onClick="cp1.select(document.forms[0].leftTextColor,'pick', 'prevL', 'fg');return false;" NAME="pick" ID="pick"><img border=0 src="http://pksml.net/button/palette.gif"></A</td> <td><input type="text" id="rightTextColor" name="rightTextColor" value="ffffff" onblur="document.getElementById('prevR').style.color = this.value;"> <A HREF="#" onClick="cp2.select(document.forms[0].rightTextColor,'pick2', 'prevR', 'fg');return false;" NAME="pick2" ID="pick2"><img border=0 src="http://pksml.net/button/palette.gif"></A></td> </tr>
</tr>
<td><input type="text" id="leftFill" name="leftFill" value="ff6600" onblur="document.getElementById('prevL').style.backgroundColor = this.value;"> <A HREF="#" onClick="cp5.select(document.forms[0].leftFill,'pick5', 'prevL', 'bg');return false;" NAME="pick5" ID="pick5"><img border=0 src="http://pksml.net/button/palette.gif"></A></td> <td><input type="text" id="rightFill" name="rightFill" value="898e79" onblur="document.getElementById('prevR').style.backgroundColor = this.value;"> <A HREF="#" onClick="cp6.select(document.forms[0].rightFill,'pick6', 'prevR', 'bg');return false;" NAME="pick6" ID="pick6"><img border=0 src="http://pksml.net/button/palette.gif"></A></td> </tr>
</tr>
<td><span class="preview" id="prevL" style="background-color: #ff6600; color: #ffffff;">RSS
</span></td> <td><span class="preview" id="prevR" style="background-color: #898e79; color: #ffffff;">VALID
</span></td> </tr>
<td>Text Position
</td><td>Text Position
</td> </tr>
<td><input type="text" id="leftTextPosition" name="leftTextPosition" value="5"></td> <td><input type="text" id="rightTextPosition" name="rightTextPosition" value="4"></td> </tr>
</tr>
<td><input type="text" id="barPosition" name="barPosition" value="25"></td> <td><input type="text" id="buttonWidth" name="buttonWidth" value="80"></td> </tr>
Outer Border Color
</td><td>Inner Border Color
</td></tr>
<td><input type="text" id="outerBorder" name="outerBorder" value="666666" onblur="document.getElementById('bg3').style.backgroundColor = this.value;"> <A HREF="#" onClick="cp3.select(document.forms[0].outerBorder,'pick3', 'bg3', 'bg');return false;" NAME="pick3" ID="pick3"><img border=0 src="http://pksml.net/button/palette.gif"></A> <span id="bg3" style="width: 20px; background-color: #666666;"> </span></td> <td><input type="text" id="innerBorder" name="innerBorder" value="ffffff" onblur="document.getElementById('bg4').style.backgroundColor = this.value;"> <A HREF="#" onClick="cp4.select(document.forms[0].innerBorder,'pick4', 'bg4', 'bg');return false;" NAME="pick4" ID="pick4"><img border=0 src="http://pksml.net/button/palette.gif"></A> <span id="bg4" style="width: 20px; background-color: #ffffff;"> </span></td> </tr>
<td colspan="2" style="text-align: center;"><BR><input type="submit" name="button" value="Make it!"></td> </tr>
</table>
</form>
<div name="buttonHTML" id="buttonHTML" style="height: 30px;"></div> <img name="buttonIMG" id="buttonIMG" src="http://pksml.net/button"> <img style="display: none;" src="http://pksml.net/button/loading.gif"> </center>
</body>
</html>