 |
 |
Picking
up Colors
Credit: SoftComplex
Description
.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 .