PHP/Javascript websafe colour picker

home > tutorials >

PHP/Javascript websafe colour picker

This tutorial shows you how to make an hexadecimal websafe colour picker like the one below in PHP and javascript

Step1.
Add the following code to the body of your document

Step2.
Add this javascript between the head tags

Improvements.
With a little modification to the code we can divide the colors into six 6x6 boxes (6x6x6 = 216)

to tidy things up a bit further we can also move most of the styles to a css file and can add the js event handlers dynamically.

<style type="text/css">
 #colrPicker{width:360px;padding:0px;}
 #colrPicker div{width:120px;float:left;}
 #colrPicker div div{width:20px;height:20px;}
</style>
<div id="colrPicker">
<input type="text" id="colr" size="8">
<input type="text" id="prevcol" size="8">
<input type="text" id="colhov" size="8">
<div>
<?php
$hex = array("00", "33", "66", "99", "CC", "FF");
$i=0;
for ($r=0; $r<count($hex); $r++){ 
 for ($g=0; $g<count($hex); $g++){ 
 for ($b=0; $b<count($hex); $b++){ 
 $color = $hex[$r].$hex[$g].$hex[$b];
 if ($i%36==0){
 echo '</div><div>';
 }
 echo "<div title=\"".$color."\"></div>"; 
 $i++;
 } 
 } 
} 
?>
</div>
</div>
<script type="text/javascript">
document.onload = addColrPickerEvents;
function addColrPickerEvents(){
 colrBoxes = document.getElementById("colrPicker").childNodes;
 for (i=0;i<colrBoxes.length;i++){
 colrs = colrBoxes[i].childNodes;
 for (i=0;i<colrs.length;i++){
 c = colrs[i].getAttribute("title");
 colrs[i].style.backgroundColor = "#"+c;
 colrs[i].onclick = function(){
 gethex("#"+c,"colr","prevcol");
 }
 colrs[i].onmouseover = function(){
 gethex("#"+c,"colhov","colhov");
 }
 }
 }
}
 
</script>

tags

Comments:

Featured Script

PHP Send this page to a friend script
as the title suggests you can add this script to any of your pages and and it will allow your visito... (read more)

Copyright © 2008 - All Rights Reserved