This is a color picker in Javascript. It allows the user to select a color from a palette of 70 predefined colors. The selected color can be assigned to HTML element properties.
See palette-example.html for a working example of the code. The example shows how to set the background and font color of a page dynamically using the Color Picker.
palette.js
<!--
var palette, color = '';
function setColor(c){
eval(color+'="'+c+'"');
}
function showPalette(el, prop){
color = prop;
palette.style.left = getObjX(el) + 57;
palette.style.top = getObjY(el);
palette.style.visibility = 'visible';
}
function getObj(name) {
return (document.getElementById && document.getElementById(name))||document[name]||(document.all && document.all[name]);
}
function getObjX(el){
var left = 0;
if(el.offsetParent){
while(1){
left += el.offsetLeft;
if(!el.offsetParent)break;
el = el.offsetParent;
}
}else if(el.x)left += el.x;
return left;
}
function getObjY(el){
var top = 0;
if(el.offsetParent){
while(1){
top += el.offsetTop;
if(!el.offsetParent)break;
el = el.offsetParent;
}
}else if(el.y)top += el.y;
return top;
}
function init(){
palette = getObj('palette');
}
-->
<body onload="init()">
<!-- This iframe is our color palette-->
<iframe width="150" height="115" name="palette" id="palette" src="palette.html" marginwidth="0" marginheight="0" scrolling="no" style="position:absolute;visibility:hidden;"></iframe>
<br>
<table style="width:100%;height:100%;">
<tr>
<td><center><table>
<tr><td><a href="javascript:void(0)" id='bgColorPreview' onclick="showPalette(this,'document.body.style.backgroundColor')" style="display:block;width:55px;height:30px;padding:0px;margin:0px;background:#FFFFFF;border:1px #333333 solid;"><img src="spacer.gif" width="55" height="30" border="0" alt=""></a></td><td>Set Background Color</td></tr>
<tr><td><a href="javascript:void(0)" id='bgColorPreview' onclick="showPalette(this,'document.body.style.color')" style="display:block;width:55px;height:30px;padding:0px;margin:0px;background:#FFFFFF;border:1px #333333 solid;"><img src="spacer.gif" width="55" height="30" border="0" alt=""></a></td><td>Set Font Color</td></tr>
<tr><td colspan="2"><p> </p>
<center><b>This is an example showing the usage of the color palette</b><br>Click on the box above to set the color. </center>
<p> </p></td></tr>
</table></center></td>
</tr>
</table>
