In the html body, place these invisibles div elements :
Ensure that the picking background image "colorpicker.png" is also available.
Then you can add an input element and link it to theses functions :
Choose a color
12/7/2007 DL
*/
var cpInput, cpColor;
function hex(c){
c=parseInt(c).toString(16);
return c.length<2?"0"+c:c
}
function getHorizColor(i, width, height){
var sWidth = (width)/7; // "section" width
var C=i%width; // column
var R=Math.floor(i/(sWidth*7)); // row
var c=i%sWidth; // column in current group
var r, g, b, h;
var l=(255/sWidth)*c; // color percentage
if(C>=sWidth*6){
r=g=b=255-l;
} else {
h=255-l;
r=C(height/2)){
var base = (height-R)/(height/2);
r=r*base;
g=g*base;
b=b*base;
}
}
return hex(r)+hex(g)+hex(b);
}
function mouseCoordinates(ev){
ev = ev || window.event;
if(ev.pageX || ev.pageY)
return {x:ev.pageX, y:ev.pageY};
return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop};
}
function getPosition(obj){
var left = 0;
var top = 0;
while (obj.offsetParent){
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
left += obj.offsetLeft;
top += obj.offsetTop;
return {x:left, y:top};
}
function showColorPicker(ev,inid){
var input = eval('document.getElementById("'+inid+'")');
var hCP = document.getElementById('hColorPicker');
hCP.onmousemove = hColorPickerMouseMove ;
hCP.onmousedown = hColorPickerMouseDown ;
cpInput = input;
cpColor = input.value;
hCP.style.backgroundColor = cpColor;
var inpPos = getPosition(input);
hCP.style.display = 'block';
hCP.style.left = inpPos.x+20;
hCP.style.top = inpPos.y+20;
}
function hideColorPicker(){
var hCP = document.getElementById('hColorPicker');
hCP.onmousemove = null ;
hCP.style.display = 'none';
}
function hColorPickerMouseMove(ev){
ev = ev || window.event;
var hCPImg = ev.target || ev.srcElement;
var mousePos = mouseCoordinates(ev);
var colorPos = getPosition(hCPImg);
var x = mousePos.x-colorPos.x;
var y = mousePos.y-colorPos.y;
var width = parseInt(hCPImg.offsetWidth);
var height = parseInt(hCPImg.offsetHeight);
var color = getHorizColor(y*width+x-1, width, height);
var hCP = document.getElementById('hColorPicker');
hCP.style.backgroundColor = cpColor = '#'+color;
}
function hColorPickerMouseDown(){
cpInput.value = cpColor;
hideColorPicker();
cpInput.style.backgroundColor = cpColor;
if (cpInput.onchange) cpInput.onchange();
}
-->