A dynamic color wheel displaying 4096 colors in a chromatic scale utilizing cross browser mouse event capture from a layer to display the hexadecimal codes of each color. Easily find that elusive color code you were looking for and learn how to manage layers and mouse events.
Right click on the image above and save it as “colorwheel.jpg”
- Copy the coding into the HEAD of your HTML document
- Add the onLoad event handler into the BODY tag
- Put the last coding into the BODY of your HTML document
<!– STEP ONE: Paste this code into the HEAD of your HTML document –>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
<!– Original: D10n ([email protected]) –>
<!– Web Site: http://www.iinet.net.au/~biab –>
<!– This script and many more are available free online at –>
<!– The JavaScript Source!! http://javascriptsource.com –>
<!– Begin
addary = new Array(); //red
addary[0] = new Array(0,1,0); //red green
addary[1] = new Array(-1,0,0); //green
addary[2] = new Array(0,0,1); //green blue
addary[3] = new Array(0,-1,0); //blue
addary[4] = new Array(1,0,0); //red blue
addary[5] = new Array(0,0,-1); //red
addary[6] = new Array(255,1,1);
clrary = new Array(360);
for(i = 0; i < 6; i++)
for(j = 0; j < 60; j++) {
clrary[60 * i + j] = new Array(3);
for(k = 0; k < 3; k++) {
clrary[60 * i + j][k] = addary[6][k];
addary[6][k] += (addary[i][k] * 4);
}
}
function capture() {
if(document.layers) {
layobj = document.layers[‘wheel’];
layobj.document.captureEvents(Event.MOUSEMOVE);
layobj.document.onmousemove = moved;
}
else {
layobj = document.all[“wheel”];
layobj.onmousemove = moved;
}
}
function moved(e) {
y = 4 * ((document.layers)?e.layerX:event.offsetX);
x = 4 * ((document.layers)?e.layerY:event.offsetY);
sx = x – 512;
sy = y – 512;
qx = (sx < 0)?0:1;
qy = (sy < 0)?0:1;
q = 2 * qy + qx;
quad = new Array(-180,360,180,0);
xa = Math.abs(sx);
ya = Math.abs(sy);
d = ya * 45 / xa;
if(ya > xa) d = 90 – (xa * 45 / ya);
deg = Math.floor(Math.abs(quad[q] – d));
n = 0;
sx = Math.abs(x – 512);
sy = Math.abs(y – 512);
r = Math.sqrt((sx * sx) + (sy * sy));
if(x == 512 & y == 512) {
c = “000000”;
}
else {
for(i = 0; i < 3; i++) {
r2 = clrary[deg][i] * r / 256;
if(r > 256) r2 += Math.floor(r – 256);
if(r2 > 255) r2 = 255;
n = 256 * n + Math.floor(r2);
}
c = n.toString(16);
while(c.length < 6) c = “0” + c;
}
if(document.layers) {
document.layers[“wheel”].document.f.t.value = “#” + c;
document.layers[“wheel”].bgColor = “#” + c;
}
else {
document.all[“wheel”].document.f.t.value = “#” + c;
document.all[“wheel”].style.backgroundColor = “#” + c;
}
return false;
}
// End –>
</script>
</HEAD><!– STEP TWO: Insert the onLoad event handler into your BODY tag –>
<BODY onLoad=”capture()”><!– STEP THREE: Copy this code into the BODY of your HTML document –>
<div id=wheel style=”position:absolute; visibility:visible; top:40px; left:120px;”>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<img src=”colorwheel.jpg” width=256 height=256 border=0>
</td>
</tr>
<tr>
<td align=”center”>
<br>
<form name=”f”>
<input type=”text” name=”t” size=27>
</form>
</td>
</tr>
</table>
</div>
<p><center>
<font face=”arial, helvetica” size”-2″>Free JavaScripts provided<br>
by <a href=”https://javascriptsource.com”>The JavaScript Source</a></font>
</center><p>