| Home | Submit | Free Hosting | Link To Us | Contacts |
JavaScript Color Picker JavaScript
 Download (.zip)<html> <head> <title>Color Picker - Demo</title> </head> <script Language="JavaScript"> <!-- Hiding var red=0; var green=0; var blue=0; var value=0; var convert = new Array() var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"); for (x=0; x<16; x++){ for (y=0; y<16; y++){ convert[value]= hexbase[x] + hexbase[y]; value++; } } function clear(){ document.color.bl.value= blue; document.color.rd.value= red; document.color.gr.value= green; } function display(){ redx = convert[red] greenx = convert[green] bluex = convert[blue] var rgb = "#"+redx+greenx+bluex; document.color.rgbdspl.value= rgb; document.bgColor =rgb; } function upred(x){ if ((red+x)<=255) red+=x document.color.rd.value= red; display() } function downred(x){ if ((red-x)>=0) red-=x document.color.rd.value= red; display() } function upgreen(x){ if ((green+x)<=255) green+=x document.color.gr.value= green; display() } function downgreen(x){ if ((green-x)>=0) green-=x document.color.gr.value= green; display() } function upblue(x){ if ((blue+x)<=255) blue+=x document.color.bl.value= blue; display() } function downblue(x){ if ((blue-x)>=0) blue-=x document.color.bl.value= blue; display() } // done hiding --> </script> <body onLoad="clear();display()" > <p> </p> <form Name="color"> <div align="center"><center><table class=normal > <tr Align="Center"> <td><input NAME="red" type="button" VALUE=" +50 " onclick="upred(50)"></td> <td><input NAME="red" type="button" VALUE=" + + " onclick="upred(10)"></td> <td><input NAME="red" type="button" VALUE=" + " onclick="upred(1)"> </td> <td><font Color="#FF0000" size="+3">RED</font></td> <td><input NAME="red-" type="button" VALUE=" - " onclick="downred(1)"></td> <td><input NAME="red-" type="button" VALUE=" - - " onclick="downred(10)"></td> <td><input NAME="red-" type="button" VALUE=" -50 " onclick="downred(50)"></td> <td><div align="left"><p><input type="text" Name="rd" Size="3"></div></td> </tr> <tr Align="Center"> <td><input NAME="green" type="button" VALUE=" +50 " onclick="upgreen(50)"></td> <td><input NAME="green" type="button" VALUE=" + + " onclick="upgreen(10)"></td> <td><input NAME="green" type="button" VALUE=" + " onclick="upgreen(1)"></td> <td><font Color="#00FF00" size="+3">GREEN</font></td> <td><input NAME="green-" type="button" VALUE=" - " onclick="downgreen(1)"></td> <td><input NAME="green-" type="button" VALUE=" - - " onclick="downgreen(10)"></td> <td><input NAME="green-" type="button" VALUE=" -50 " onclick="downgreen(50)"></td> <td><input type="text" Name="gr" Size="3"></td> </tr> <tr Align="Center"> <td><input NAME="blue" type="button" VALUE=" +50 " onclick="upblue(50)"></td> <td><input NAME="blue" type="button" VALUE=" + + " onclick="upblue(10)"></td> <td><input NAME="blue" type="button" VALUE=" + " onclick="upblue(1)"></td> <td><font Color="#0000FF" size="+3">BLUE</font></td> <td><input NAME="blue-" type="button" VALUE=" - " onclick="downblue(1)"></td> <td><input NAME="blue-" type="button" VALUE=" - - " onclick="downblue(10)"></td> <td><input NAME="blue-" type="button" VALUE=" -50 " onclick="downblue(50)"></td> <td><input type="text" Name="bl" Size="3"></td> </tr> </table> </center></div><div align="center"><center><p><input type="text" Name="rgbdspl" Size="7"> </p> </center></div> </form> <p> </p> <p align="center"><font color="#C0C0C0">Copy source...</font></p> </body> </html>
|
