|
|
|
|
|
<html>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<title><EFBFBD><EFBFBD>ɫѡ<EFBFBD><EFBFBD></title>
|
|
|
|
|
|
<STYLE TYPE="text/css">
|
|
|
|
|
|
body {margin:10; font:arial,helvetica; background:menu}
|
|
|
|
|
|
button {width:5em}
|
|
|
|
|
|
table.ColorTable {cursor:hand}
|
|
|
|
|
|
</STYLE>
|
|
|
|
|
|
<script language=JavaScript>
|
|
|
|
|
|
<!--
|
|
|
|
|
|
function MouseOver( color ) {
|
|
|
|
|
|
var viewObj = document.getElementById("VIEW");
|
|
|
|
|
|
var valueObj = document.getElementById("VALUE");
|
|
|
|
|
|
viewObj.style.backgroundColor = color;
|
|
|
|
|
|
valueObj.innerText = color;
|
|
|
|
|
|
}
|
|
|
|
|
|
function MouseClick( color ) {
|
|
|
|
|
|
window.returnValue = color;
|
|
|
|
|
|
window.close();
|
|
|
|
|
|
}
|
|
|
|
|
|
function MouseOut() {
|
|
|
|
|
|
MouseOver( "" );
|
|
|
|
|
|
}
|
|
|
|
|
|
-->
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<script language="JavaScript">
|
|
|
|
|
|
<!--
|
|
|
|
|
|
// create 6-element array
|
|
|
|
|
|
var hex = new Array(6)
|
|
|
|
|
|
// assign non-dithered descriptors
|
|
|
|
|
|
hex[0] = "FF"
|
|
|
|
|
|
hex[1] = "CC"
|
|
|
|
|
|
hex[2] = "99"
|
|
|
|
|
|
hex[3] = "66"
|
|
|
|
|
|
hex[4] = "33"
|
|
|
|
|
|
hex[5] = "00"
|
|
|
|
|
|
// draw a single table cell based on all descriptors
|
|
|
|
|
|
function drawCell(red, green, blue) {
|
|
|
|
|
|
// open cell with specified hexadecimal triplet background color
|
|
|
|
|
|
var color = '#' + red + green + blue;
|
|
|
|
|
|
document.write('<TD BGCOLOR="' + color + '"' +
|
|
|
|
|
|
' onclick=MouseClick("' + color + '")' +
|
|
|
|
|
|
' onmouseover=MouseOver("' + color + '")' +
|
|
|
|
|
|
'>');
|
|
|
|
|
|
// print transparent image (use any height and width)
|
|
|
|
|
|
document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>')
|
|
|
|
|
|
// close table cell
|
|
|
|
|
|
document.write('</TD>')
|
|
|
|
|
|
}
|
|
|
|
|
|
// draw table row based on red and blue descriptors
|
|
|
|
|
|
function drawRow(red, blue) {
|
|
|
|
|
|
// open table row
|
|
|
|
|
|
document.write('<TR>')
|
|
|
|
|
|
|
|
|
|
|
|
// loop through all non-dithered color descripters as green hex
|
|
|
|
|
|
for (var i = 0; i < 6; ++i) {
|
|
|
|
|
|
drawCell(red, hex[i], blue)
|
|
|
|
|
|
}
|
|
|
|
|
|
// close current table row
|
|
|
|
|
|
document.write('</TR>')
|
|
|
|
|
|
}
|
|
|
|
|
|
// draw table for one of six color cube panels
|
|
|
|
|
|
function drawTable(blue) {
|
|
|
|
|
|
// open table (one of six cube panels)
|
|
|
|
|
|
document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')
|
|
|
|
|
|
// loop through all non-dithered color descripters as red hex
|
|
|
|
|
|
for (var i = 0; i < 6; ++i) {
|
|
|
|
|
|
drawRow(hex[i], blue)
|
|
|
|
|
|
}
|
|
|
|
|
|
// close current table
|
|
|
|
|
|
document.write('</TABLE>')
|
|
|
|
|
|
}
|
|
|
|
|
|
// draw all cube panels inside table cells
|
|
|
|
|
|
function drawCube() {
|
|
|
|
|
|
// open table
|
|
|
|
|
|
document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 onmouseout="MouseOut();"><TR>')
|
|
|
|
|
|
// loop through all non-dithered color descripters as blue hex
|
|
|
|
|
|
for (var i = 0; i < 3; ++i) {
|
|
|
|
|
|
// open table cell with white background color
|
|
|
|
|
|
document.write('<TD BGCOLOR="#FFFFFF">')
|
|
|
|
|
|
// call function to create cube panel with hex[i] blue hex
|
|
|
|
|
|
drawTable(hex[i])
|
|
|
|
|
|
// close current table cell
|
|
|
|
|
|
document.write('</TD>')
|
|
|
|
|
|
}
|
|
|
|
|
|
document.write('</TR><TR>');
|
|
|
|
|
|
for (var i = 3; i < 6; ++i) {
|
|
|
|
|
|
// open table cell with white background color
|
|
|
|
|
|
document.write('<TD BGCOLOR="#FFFFFF">')
|
|
|
|
|
|
// call function to create cube panel with hex[i] blue hex
|
|
|
|
|
|
drawTable(hex[i])
|
|
|
|
|
|
// close current table cell
|
|
|
|
|
|
document.write('</TD>')
|
|
|
|
|
|
}
|
|
|
|
|
|
// close table row and table
|
|
|
|
|
|
document.write('</TR></TABLE>')
|
|
|
|
|
|
}
|
|
|
|
|
|
// call function to begin execution
|
|
|
|
|
|
drawCube();
|
|
|
|
|
|
// -->
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<center>
|
|
|
|
|
|
<table border="1" cellpadding="2" cellspacing="0">
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td id="VIEW" width="50%"> </td>
|
|
|
|
|
|
<td id="VALUE" width="50%"> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</center>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
