JavaScript Components: Color Picker

Picking up Colors

.In some applications having to pick colors either requires inspired guessing, great memory or running all over the place. That is why it is very handy to have this components to store user selected color choice data.

Key features and JavaScript elements
Uses CSS and pop-up windows to build up color picker - the technology is much like a calendar component.. The color picker component automatically fills in the associated form field. There are 3 major parts to the color picker component:

picker.js - the driver javascript code that goes in the root our jvascript directory (we use the latter here);
picker.html - contains the popup window code that displays the different color palettes
sel.gif - the color picker icon which( we have renamed it cpiksel.gif and put itin our images directory).

To use the color picker is a three step process.
1) add, the following code to the <head> of your web page:
  <script language=JavaScript src="javascript/picker.js" ></script>
2)When you create your form be sure to give it a unique name: <form name="someUniqueName">
3)For the input field, also give it a unique field name because that is what will be passed to the color picker.
4)Finally place the color picker icon image right next to the input text field with the correct call. Here is the coding:
  <form name='tcp_test'>
    <input type='text' name="input0' value="#FFFFFF">
    <a href='javascript:TCP.popup(document.tcp_test.input0,1)' ><img src='images/cpiksel.gif'></a>

By putting the icon image inside a link reference, <a> , one guarantees that the mouse cursor will change to a pointer hand when the mouse hovers over the icon. Otherwise using an onClick event inside the <img> tag would work just as well as we show in our second example. The only thing missing in this color picker is a suggestion of what color has been chosen. Otherwise the code is freely available from Tigra/SoftComplex .

Try out the script with this demo form
Select color from Web safe palette: Click Here to Pick up the color
Select color from Windows system palette; converted to onClick so cursor does
NOT change when hovering over color picker icon.
Click Here to Pick up the color
Select color from grayscale palette: Click Here to Pick up the color
Picker reads initial value from the input; simplified reference to input field Click Here to Pick up the color
Top of Page  Tutorials Home  Javascript References  JavaScript Books