There are two parts. First is the form that pops up the colour chart and receives the selected colour:
Code: Select all
<html>
<head>
<title>Colour Form</title>
<!--
Author: David Tee
Copyright: TenForward Ltd
Web Site: http://www.tenforward.biz
Email: david@tenforward.biz
Comments: Simple tool for selecting colours and inserting the results into form input fields
Part 1: the form where the colour is needed
-->
<script>
function popCal(returnbox){
//first detect the mouse position
var posx = 0;
var posy = 0;
if (!e)
var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + 10;
posy = e.clientY + document.body.scrollTop + 70;
}
//now open the colour picker window near the mouse position
var cal = window.open("colchart.php?returnbox="+returnbox,"colchart","width=460,height=70,left="+posx+",screenx="+posx+",top="+posy+",screeny="+posy);
cal.focus();
}
</script>
</head>
<body>
<h3>Pick a colour</h3>
<form name="MyForm">
<input type="text" name="colour1">
<button type="button" title="Click here to view colours" onclick="javascript:popCal('colour1')">--></button>
<br>
<input type="text" name="colour2">
<button type="button" title="Click here to view colours" onclick="javascript:popCal('colour2')">--></button>
</form>
</body>
</html>Code: Select all
<html>
<head>
<title>Colour Chart</title>
<!--
Author: David Tee
Copyright: TenForward Ltd
Web Site: http://www.tenforward.biz
Email: david@tenforward.biz
Comments: Simple tool for selecting colours and inserting the results into form input fields
Part 2: the colour selection chart
-->
<script>
// return to the page that opened this and set the colour value to the input box on the form
function updateParent(chosencolour){
opener.document.MyForm.<?=$_GET['returnbox']?>.value = chosencolour;
opener.document.MyForm.<?=$_GET['returnbox']?>.focus();
window.close();
}
// check that enter was pressed and return to the opening page
function checkEnter(chosencolour) {
var code;
var e = window.event;
if(e.keyCode)
code = e.keyCode;
else if(e.which)
code = e.which;
if(code==13)
updateParent(chosencolour);
}
function showColour(col) {
colval.value = col; //display the hex value of the colour
showcol.bgColor = col; //set the background colour of the row to the colour
}
</script>
</head>
<body topmargin="1" leftmargin="1">
<table align="center" bgcolor="" border="1" cellpadding="0" cellspacing="0" width="100%">
<?php
$cw=10; # width of the colour box
$ch=12; # height of the colour box
for($g=255;$g>=0;$g-=51) {
echo " <tr>\n";
for($r=255;$r>=0;$r-=51) {
for($b=255;$b>=0;$b-=51) {
$cl = "#".substr("000000".dechex(($r<<16)+($g<<8)+$b),-6); # create the hex string of the colour with preceeding zeros
$rw = " <td height=\"$ch\" width=\"$cw\" ";
$rw .= "title=\"$cl\" ";
$rw .= "bgcolor=\"$cl\" ";
$rw .= "onclick=\"updateParent('$cl')\" ";
$rw .= "onmouseover=\"showColour('$cl')\" ";
$rw .= ">\n";
$rw .= " </td>\n";
echo $rw;
}
}
echo " </tr>\n";
}
?>
<tr id="showcol" bgcolor="#ffffff">
<td colspan="36">
<input type="text" name="colval" value="" size="7" onkeypress="checkEnter(this.value)">
</td>
</tr>
</table>
</body>
</html>