Plaats de stylesheet in de head-sectie van jouw pagina en het javascript in de body-sectie (op de plaats waar je de color picker wilt laten verschijnen). Je hebt ook nog gray-scale.png, hex-kleuren.png en kleur-kiezer.jpg nodig om de procedure te laten werken.
<style type="text/css">
.color_picker_select_box{
position:absolute;
width:290px;
line-height:290px;
border:outset 2px;
background-color:#cdcdcd;
padding:2px;
z-index:10}
.color_picker_achtergrond_kleurdoos{
width:256px;
line-height:256px;
border:solid 1px #000;
padding:0px;
float:left}
.color-picker-knop{
display:inline-block;
cursor:pointer;
width:32px;
background-image:url("kleur-kiezer.jpg");
border:solid 1px transparent}
.color-picker-knop:active{
border-color:#000}
.kleurdoos_select_box {
width:256px;
line-height:256px;
border:solid 0px #000;
padding:0px;
float:left;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='gray-scale.png')}
.kleurdoos_select_box[class] {
background:url('gray-scale.png') no-repeat top left}
.h_select_box{
width:20px;
height:256px;
line-height:256px;
border:1px solid #000;
padding:0px;
margin-left:5px;
float:left;
background-image:url('hex-kleuren.png');
margin-right:0px;
margin-top:0px;
margin-bottom:0px}
.hue_cursor{
position:absolute;
border:solid 1px #000;
height:2px;
line-height:2px;
width:22px;
padding:0px;
margin-left:-2px}
.kleurdoos_horizontale_cursor{
position:absolute;
border:solid 0px #000;
border-top-width:1px;
background-color:transparent;
height:0px;
line-height:0px;
width:257px;
padding:0px}
.kleurdoos_verticale_cursor{
position:absolute;
border:solid 0px #000;
background-color:#000;
height:257px;
width:1px;
padding:0px}
.kleurdoos_cursor_midden{
position:absolute;
border:solid 1px #000;
background-color:#ffffff;
height:7px;
line-height:7px;
width:7px;
padding:0px;
z-index:12}
.color_picker_box{
float:left;
clear:left;
margin-top:5px;
border:solid 1px #000;
width:256px;
height:20px;
line-height:30px}
.color_value_box {
float:right;
border:solid 1px #000;
margin:2px;
vertical-align:middle;
padding-left:2px;
height:15px;
line-height:15px;
font-size:8pt;
background-color:#ffffff;
width:12ex}
.onderhoek{
float:right;
width:20px;
height:20px}
</style>
<!--[if IE]>
<style type="text/css">
.kleurdoos_verticale_cursor {
margin-top:-257px;}
</style>
<![endif]-->
<script>
/*global window: false */
/*global document: false */
/*global self: false */
/*global setTimeout: false */
/*jslint continue: true */
/*global ob: true */
/*global yPos: true */
/*global tempEl: true */
/*global xPos: true */
/*global hsv: true */
var i;
var l1 = 0;
var kiezer = [];
var id = "";
var color_picker_code;
var color_picker_funktie;
var mouse_x;
var mouse_y;
var color_selects = [];
var scrolling = true;
function set_scrolling() {
scrolling = true;
}
function XBrowserAddHandler(target, eventName, handlerName) {
if (target.addEventListener) {
target.addEventListener(eventName, function (e) {
target[handlerName](e);
}, false);
} else {
if (target.attachEvent) {
target.attachEvent("on" + eventName, function (e) {
target[handlerName](e);
});
} else {
var originalHandler = target["on" + eventName];
if (originalHandler) {
target["on" + eventName] = function (e) {
originalHandler(e);
target[handlerName](e);
};
} else {
target["on" + eventName] = target[handlerName];
}
}
}
}
function generic_h_select_box_mousedown() {
color_picker_code = "kiezer.h_select_box_mousedown();";
var color_picker_funktie = new Function(color_picker_code);
color_picker_funktie();
}
function generic_h_select_box_mouseup() {
if (this.id) {
id = this.id;
}
color_picker_code = "kiezer.h_select_box_mouseup();";
var color_picker_funktie = new Function(color_picker_code);
color_picker_funktie();
}
function generic_kleurdoos_select_box_mousedown() {
color_picker_code = "kiezer.kleurdoos_select_box_mousedown();";
color_picker_funktie = new Function(color_picker_code);
color_picker_funktie();
}
function generic_kleurdoos_select_box_mouseup() {
color_picker_code = "kiezer.kleurdoos_select_box_mouseup();";
color_picker_funktie = new Function(color_picker_code);
}
function color_select_update(event) {
var cs_active = false;
for (l1 = 0; l1 < color_selects.length; l1++) {
ob = color_selects[l1];
if (ob.active) {
cs_active = true;
}
ob.sv_update();
ob.hue_cursor_to_color();
}
if (event && cs_active) {
if (event.cancelBubble) {
event.cancelBubble = true;
} else {
if (event.stopPropagation) {
event.stopPropagation();
}
if (event.preventDefault) {
event.preventDefault();
}
}
}
}
function color_select(i, init_color) {
this.id = i;
this.sv_image = "";
this.x = 0;
this.y = 0;
this.hexcolor = "";
this.color_picker_select_box = document.createElement("div");
this.color_picker_select_box.id = this.id + "_color_picker_select_box";
this.color_picker_select_box.className = "color_picker_select_box";
this.color_picker_select_box.style.display = "none";
document.getElementsByTagName("body").item(0).appendChild(this.color_picker_select_box);
this.kleurdoos_horizontale_cursor = document.createElement("div");
this.kleurdoos_horizontale_cursor.id = this.id + "_kleurdoos_horizontale_cursor";
this.kleurdoos_horizontale_cursor.className = "kleurdoos_horizontale_cursor";
this.kleurdoos_horizontale_cursor.style.visibility = "hidden";
this.color_picker_select_box.appendChild(this.kleurdoos_horizontale_cursor);
this.kleurdoos_verticale_cursor = document.createElement("div");
this.kleurdoos_verticale_cursor.id = this.id + "_kleurdoos_verticale_cursor";
this.kleurdoos_verticale_cursor.className = "kleurdoos_verticale_cursor";
this.kleurdoos_verticale_cursor.style.visibility = "hidden";
this.color_picker_select_box.appendChild(this.kleurdoos_verticale_cursor);
this.kleurdoos_cursor_midden = document.createElement("div");
this.kleurdoos_cursor_midden.id = this.id + "_kleurdoos_cursor_midden";
this.kleurdoos_cursor_midden.className = "kleurdoos_cursor_midden";
this.kleurdoos_cursor_midden.style.visibility = "hidden";
this.color_picker_select_box.appendChild(this.kleurdoos_cursor_midden);
this.color_picker_achtergrond_kleurdoos = document.createElement("div");
this.color_picker_achtergrond_kleurdoos.id = this.id + "_color_picker_achtergrond_kleurdoos";
this.color_picker_achtergrond_kleurdoos.className = "color_picker_achtergrond_kleurdoos";
this.color_picker_select_box.appendChild(this.color_picker_achtergrond_kleurdoos);
this.color_picker_achtergrond_kleurdoos.style.height = "256px";
this.color_picker_achtergrond_kleurdoos.style.width = "256px";
this.kleurdoos_select_box = document.createElement("div");
this.kleurdoos_select_box.id = this.id + "_kleurdoos_select_box";
this.kleurdoos_select_box.className = "kleurdoos_select_box";
this.color_picker_achtergrond_kleurdoos.appendChild(this.kleurdoos_select_box);
this.kleurdoos_select_box.style.height = "256px";
this.kleurdoos_select_box.style.width = "256px";
this.kleurdoos_select_box.mousedownHandler = generic_kleurdoos_select_box_mousedown;
this.kleurdoos_select_box.mouseupHandler = generic_kleurdoos_select_box_mouseup;
XBrowserAddHandler(this.kleurdoos_select_box, "mousedown", "mousedownHandler");
XBrowserAddHandler(this.kleurdoos_select_box, "mouseup", "mouseupHandler");
this.h_select_box = document.createElement("div");
this.h_select_box.id = this.id + "_h_select_box";
this.h_select_box.className = "h_select_box";
this.h_select_box.mousedownHandler = generic_h_select_box_mousedown;
this.h_select_box.mouseupHandler = generic_h_select_box_mouseup;
XBrowserAddHandler(this.h_select_box, "mousedown", "mousedownHandler");
XBrowserAddHandler(this.h_select_box, "mouseup", "mouseupHandler");
this.color_picker_select_box.appendChild(this.h_select_box);
this.color_picker_box = document.createElement("div");
this.color_picker_box.id = this.id + "_color_picker_box";
this.color_picker_box.className = "color_picker_box";
this.color_picker_select_box.appendChild(this.color_picker_box);
this.color_value_box = document.createElement("div");
this.color_value_box.id = this.id + "_color_value_box";
this.color_value_box.className = "color_value_box";
this.color_picker_box.appendChild(this.color_value_box);
this.onderhoek = document.createElement("div");
this.onderhoek.id = this.id + "_onderhoek";
this.onderhoek.className = "onderhoek";
this.color_picker_select_box.appendChild(this.onderhoek);
this.hue_cursor = document.createElement("div");
this.hue_cursor.id = this.id + "_hue_cursor";
this.hue_cursor.className = "hue_cursor";
this.h_select_box.appendChild(this.hue_cursor);
this.hue_offset = 0;
this.sat_offset = 0;
this.val_offset = 0;
this.color_select_bounding_box = new Array(4);
this.initialized = false;
this.active = false;
this.h_select_box_focus = false;
this.kleurdoos_select_box_focus = false;
function docjslib_getRealTop(imgElem) {
yPos = imgElem.offsetTop;
tempEl = imgElem.offsetParent;
while (tempEl !== null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
function docjslib_getRealLeft(imgElem) {
xPos = imgElem.offsetLeft;
tempEl = imgElem.offsetParent;
while (tempEl !== null) {
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}
this.change_update_function = this.id + "_change_update";
this.hide_update_function = this.id + "_hide_update";
this.attach_to_element = function (e) {
this.x = docjslib_getRealLeft(e);
this.y = docjslib_getRealTop(e) + 22;
};
this.h_select_box_mousedown = function () {
this.h_select_box_focus = true;
window.status = "(h_select_box_mousedown) (" + mouse_x + "," + mouse_y + ") " + this.id + " " + this.h_select_box_focus;
this.hue_cursor_to_color();
this.sv_update();
color_select_update();
};
this.h_select_box_mouseup = function () {
this.h_select_box_focus = false;
};
this.kleurdoos_select_box_mousedown = function () {
this.kleurdoos_select_box_focus = true;
window.status = "(kleurdoos_select_box_mousedown) (" + mouse_x + "," + mouse_y + ") " + this.id + " " + this.kleurdoos_select_box_focus;
this.sv_update();
color_select_update();
};
this.kleurdoos_select_box_mouseup = function () {
this.kleurdoos_select_box_focus = false;
};
this.show = function () {
this.color_select_bounding_box = [];
if (!document.all && this.sv_image) {
this.kleurdoos_select_box.style.backgroundImage = "url('" + this.sv_image + "')";
}
this.color_picker_select_box.style.visibility = "visible";
this.color_picker_select_box.style.display = "block";
this.color_picker_select_box.style.position = "absolute";
this.color_picker_select_box.style.left = this.x - docjslib_getRealLeft(this.color_picker_select_box.offsetParent) + "px";
this.color_picker_select_box.style.top = this.y - docjslib_getRealTop(this.color_picker_select_box.offsetParent) + "px";
this.sat_offset = docjslib_getRealTop(this.kleurdoos_select_box);
this.val_offset = docjslib_getRealLeft(this.kleurdoos_select_box);
this.hue_offset = docjslib_getRealTop(this.h_select_box);
this.color_select_bounding_box[0] = this.x;
this.color_select_bounding_box[1] = this.y;
this.color_select_bounding_box[2] = 300;
this.color_select_bounding_box[3] = 300;
this.sv_cursor_draw();
this.hue_cursor.style.left = docjslib_getRealLeft(this.h_select_box) - docjslib_getRealLeft(this.color_picker_select_box) - 1;
this.hue_cursor_draw();
this.initialized = true;
this.active = true;
this.update_color_picker_box();
};
this.hide = function () {
if (this.color_picker_select_box) {
this.color_picker_select_box.style.display = "none";
}
this.active = false;
this.unfocus();
try {
if (self[this.hide_update_function]) {
setTimeout(this.hide_update_function + '("' + this.hexcolor + '")', 100);
}
} catch (e) {}
};
this.toggle_color_select = function () {
if (this.active) {
this.hide();
} else {
this.show();
}
};
this.select_disable = function () {
if (this.h_select_box_focus || this.kleurdoos_select_box_focus) {
return true;
} else {
return false;
}
};
this.hue_cursor_to_color = function () {
if (!this.h_select_box_focus) {
return;
}
var new_hue_cursor_pos = mouse_y - this.hue_offset;
if (new_hue_cursor_pos > 255) {
new_hue_cursor_pos = 255;
}
if (new_hue_cursor_pos < 0) {
new_hue_cursor_pos = 0;
}
this.hue_cursor_pos = new_hue_cursor_pos;
this.hue_value = 360 - new_hue_cursor_pos / 255 * 360;
this.hue_cursor_draw();
this.cursor_to_color();
};
this.sv_update = function () {
if (!this.kleurdoos_select_box_focus) {
return;
}
var new_sat_cursor_pos = mouse_y - this.sat_offset;
var new_val_cursor_pos = mouse_x - this.val_offset;
if (new_sat_cursor_pos > 255) {
new_sat_cursor_pos = 255;
}
if (new_sat_cursor_pos < 0) {
new_sat_cursor_pos = 0;
}
if (new_val_cursor_pos > 255) {
new_val_cursor_pos = 255;
}
if (new_val_cursor_pos < 0) {
new_val_cursor_pos = 0;
}
this.sat_cursor_pos = new_sat_cursor_pos;
this.val_cursor_pos = new_val_cursor_pos;
this.sv_cursor_draw();
this.cursor_to_color();
return;
};
function hsv2rgb(hsv) {
var h = hsv[0];
var s = hsv[1];
var v = hsv[2];
var r;
var g;
var b;
if (s === 0) {
return new Array(v, v, v);
}
var htemp;
if (h === 360) {
htemp = 0;
} else {
htemp = h;
}
htemp = htemp / 60;
i = Math.floor(htemp);
var f = htemp - i;
var p = v * (1 - s);
var q = v * (1 - (s * f));
var t = v * (1 - (s * (1 - f)));
if (i === 0) {
r = v;
g = t;
b = p;
}
if (i === 1) {
r = q;
g = v;
b = p;
}
if (i === 2) {
r = p;
g = v;
b = t;
}
if (i === 3) {
r = p;
g = q;
b = v;
}
if (i === 4) {
r = t;
g = p;
b = v;
}
if (i === 5) {
r = v;
g = p;
b = q;
}
r = Math.round(r);
g = Math.round(g);
b = Math.round(b);
return new Array(r, g, b);
}
this.hue_cursor_draw = function () {
if (!this.hue_cursor.style) {
return;
}
if (!this.color_picker_achtergrond_kleurdoos.style) {
return;
}
this.hue_cursor.style.top = this.hue_cursor_pos + 1 + "px";
this.hue_cursor.style.visibility = "visible";
var hsvcolor = new Array(this.hue_value, 1, 255);
var rgbcolor = hsv2rgb(hsvcolor);
var new_color = "rgb(" + rgbcolor[0] + ", " + rgbcolor[1] + ", " + rgbcolor[2] + ")";
this.color_picker_achtergrond_kleurdoos.style.background = new_color;
};
this.sv_cursor_draw = function () {
if (!this.kleurdoos_horizontale_cursor.style) {
return;
}
if (!this.kleurdoos_verticale_cursor.style) {
return;
}
var cursor_color = this.val_cursor_pos;
if (cursor_color === 0) {
cursor_color = 0.001;
}
cursor_color = Math.round(255 / (cursor_color / 30));
if (cursor_color > 255) {
cursor_color = 255;
}
if (cursor_color < 0) {
cursor_color = 0;
}
this.kleurdoos_verticale_cursor.style.backgroundColor = "rgb(" + cursor_color + "," + cursor_color + "," + cursor_color + ")";
this.kleurdoos_horizontale_cursor.style.borderColor = "rgb(" + cursor_color + "," + cursor_color + "," + cursor_color + ")";
this.kleurdoos_horizontale_cursor.style.top = this.sat_cursor_pos + 3 + "px";
this.kleurdoos_horizontale_cursor.style.left = 2 + "px";
this.kleurdoos_horizontale_cursor.style.visibility = "visible";
this.kleurdoos_verticale_cursor.style.left = this.val_cursor_pos + 3 + "px";
this.kleurdoos_verticale_cursor.style.visibility = "visible";
window.status = (this.sat_cursor_pos + 3) + ", " + (this.val_cursor_pos + 3);
};
this.cursor_to_color = function () {
this.hue_value = ((255 - this.hue_cursor_pos) / 255 * 360);
this.sat_value = (255 - this.sat_cursor_pos) / 255;
this.val_value = this.val_cursor_pos;
this.update_color_picker_box();
};
this.unfocus = function () {
this.kleurdoos_select_box_focus = false;
};
function baseconverter(number, ob, nb, desired_length) {
number += "";
number = number.toUpperCase();
var list = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var dec = 0;
for (i = 0; i <= number.length; i++) {
dec += (list.indexOf(number.charAt(i))) * (Math.pow(ob, (number.length - i - 1)));
}
number = "";
var magnitude = Math.floor((Math.log(dec)) / (Math.log(nb)));
for (i = magnitude; i >= 0; i--) {
var amount = Math.floor(dec / Math.pow(nb, i));
number = number + list.charAt(amount);
dec -= amount * (Math.pow(nb, i));
}
var length = number.length;
if (length < desired_length) {
for (i = 0; i < desired_length - length; i++) {
number = "0" + number;
}
}
return number;
}
function rgb2hsv(rgb) {
var r = rgb[0];
var g = rgb[1];
var b = rgb[2];
var h;
var s;
var v = Math.max(Math.max(r, g), b);
var min = Math.min(Math.min(r, g), b);
var delta = v - min;
if (v === 0) {
s = 0;
} else {
s = delta / v;
}
if (s === 0) {
h = 0;
} else {
if (r === v) {
h = 60 * (g - b) / delta;
} else {
if (g === v) {
h = 120 + 60 * (b - r) / delta;
} else {
if (b === v) {
h = 240 + 60 * (r - g) / delta;
}
}
}
}
if (h < 0) {
h += 360;
}
return new Array(h, s, v);
}
function hex2rgb(h) {
h = h.replace(/#/, "");
var r = Math.round(parseInt(h.substring(0, 2), 16));
var g = Math.round(parseInt(h.substring(2, 4), 16));
var b = Math.round(parseInt(h.substring(4, 6), 16));
var results = [r, g, b];
return results;
}
this.setrgb = function (c) {
if (!c.match(/#([0-9]|[A-F]){6}/i)) {
return false;
}
var rgb = hex2rgb(c.substring(1, 7));
hsv = rgb2hsv(rgb);
this.sethsv(hsv[0], hsv[1], hsv[2]);
return true;
};
this.sethsv = function (h, s, v) {
this.hue_value = h;
this.sat_value = s;
this.val_value = v;
this.hue_cursor_pos = (360 - this.hue_value) / 360 * 255;
this.sat_cursor_pos = Math.round(255 - 255 * this.sat_value);
this.val_cursor_pos = this.val_value;
this.update_color_picker_box();
};
this.update_color_picker_box = function () {
var hsvcolor = new Array(this.hue_value, this.sat_value, this.val_value);
var rgbcolor = hsv2rgb(hsvcolor);
var new_color = "rgb(" + rgbcolor[0] + "," + rgbcolor[1] + "," + rgbcolor[2] + ")";
this.hexcolor = "#" + baseconverter(rgbcolor[0], 10, 16, 2) + baseconverter(rgbcolor[1], 10, 16, 2) + baseconverter(rgbcolor[2], 10, 16, 2);
try {
if (self[this.change_update_function]) {
setTimeout(this.change_update_function + '("' + this.hexcolor + '")', 100);
}
} catch (e) {}
if (this.color_value_box) {
this.color_value_box.innerHTML = this.hexcolor;
}
if (this.color_value_box.style) {
this.color_picker_box.style.background = new_color;
}
};
if (init_color) {
this.setrgb(init_color);
} else {
this.setrgb("#ffffff");
}
color_selects[color_selects.length] = this;
}
function color_select_mousedown(event) {
var cs_active = false;
for (l1 = 0; l1 < color_selects.length; l1++) {
var ob = color_selects[l1];
if (!ob.active) {
cs_active = true;
if (cs_active === true) {
continue;
}
}
if (mouse_x < ob.color_select_bounding_box[0] || mouse_y < ob.color_select_bounding_box[1] || mouse_x > (ob.color_select_bounding_box[0] + ob.color_select_bounding_box[2]) || mouse_y > (ob.color_select_bounding_box[1] + ob.color_select_bounding_box[3])) {
scrolling = false;
setTimeout("color_select_hide(" + l1 + ")", 200);
}
}
if (cs_active && event) {
if (event.cancelBubble) {
event.cancelBubble = true;
} else {
if (event.stopPropagation) {
event.stopPropagation();
}
if (event.preventDefault) {
event.preventDefault();
}
}
}
}
function color_select_hide(num) {
if (!scrolling) {
color_selects[num].hide();
} else {
scrolling = false;
}
}
function color_select_hideall() {
for (l1 = 0; l1 < color_selects.length; l1++) {
color_selects[l1].hide();
}
}
function color_select_mouseup() {
for (l1 = 0; l1 < color_selects.length; l1++) {
ob = color_selects[l1];
ob.unfocus();
scrolling = false;
}
}
function get_mouse_coords(e) {
if (window.getSelection) {
mouse_x = e.pageX;
mouse_y = e.pageY;
} else {
if (document.selection && document.selection.createRange) {
if (document.documentElement.scrollTop) {
mouse_x = window.event.clientX + document.documentElement.scrollLeft - 4;
mouse_y = window.event.clientY + document.documentElement.scrollTop - 4;
} else {
if (document.body) {
mouse_x = window.event.clientX + document.body.scrollLeft - 4;
mouse_y = window.event.clientY + document.body.scrollTop - 4;
}
}
} else {
window.status = "update jouw browser";
return;
}
}
}
function get_mouse_coords_old(e) {
if (window.event) {
mouse_x = window.event.clientX + document.body.scrollLeft;
mouse_y = window.event.clientY + document.body.scrollTop;
} else {
mouse_x = e.pageX;
mouse_y = e.pageY;
}
}
function findowner(evt) {
if (evt.target) {
return evt.target;
} else {
if (evt.srcElement) {
return evt.srcElement;
} else {
return null;
}
}
}
function color_select_unfocus() {
for (l1 = 0; l1 < color_selects.length; l1++) {
ob = color_selects[l1];
ob.unfocus();
}
}
function cs_select_disable() {
for (l1 = 0; l1 < color_selects.length; l1++) {
ob = color_selects[l1];
if (ob.select_disable()) {
return false;
}
}
}
if (document.attachEvent) {
document.attachEvent("onmousedown", color_select_mousedown);
document.attachEvent("onmouseup", color_select_mouseup);
document.attachEvent("onmouseup", color_select_unfocus);
document.attachEvent("onmousemove", get_mouse_coords);
document.attachEvent("onmousemove", color_select_update);
document.attachEvent("onselectstart", cs_select_disable);
document.attachEvent("onscroll", set_scrolling);
} else {
document.addEventListener("scroll", set_scrolling, false);
document.addEventListener("resize", color_select_mousedown, false);
document.addEventListener("mousedown", color_select_mousedown, false);
document.addEventListener("mouseup", color_select_mouseup, false);
document.addEventListener("mousemove", get_mouse_coords, false);
document.addEventListener("mousemove", color_select_update, false);
document.addEventListener("resize", color_select_hideall, false);
}
var kiezer, color_select;
function kleur_kiezer_init() {
kiezer = new color_select('kiezer');
kiezer.attach_to_element(document.getElementById("color_select_icon1"));
}
var menu0_custom_color = "#ffffff";
function cs0_change_update(new_color) {
if (new_color) {
menu0_custom_color = new_color;
document.getElementById("op_custom").style.background = menu0_custom_color;
document.color_select_form0.color_menu0.style.background = menu0_custom_color;
} else {
if (document.color_select_form0.color_menu0[document.color_select_form0.color_menu0.selectedIndex].value === "custom") {
document.getElementById("color_select_icon0").style.visibility = "visible";
document.color_select_form0.color_menu0.style.background = menu0_custom_color;
} else {
new_color = document.color_select_form0.color_menu0[document.color_select_form0.color_menu0.selectedIndex].value;
document.getElementById("color_select_icon0").style.visibility = "hidden";
}
document.color_select_form0.dummy.style.display = 'inline';
document.color_select_form0.dummy.focus();
document.color_select_form0.dummy.style.display = 'none';
}
}
function kiezer_change_update(new_color) {
document.color_picker_form.kleur_kiezer.value = new_color;
}
setTimeout(function () {
kleur_kiezer_init();
}, 300);
</script>