Jump to content

my simple color picker


kanchatchai
 Share

Recommended Posts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"><!--#block{width:250px;}#blockPink{ background-color: #EFB4CF; border: 1px solid #BB8EA4;}#blockRed{ background-color: #FCB895; border: 1px solid #C49176;}#blockOrange{ background-color: #FCD192; border: 1px solid #C3A475;}#blockBrown{ background-color: #E2D2C3; border: 1px solid #B1A79C;}#blockYellowOrange{ background-color: #F7E5C1; border: 1px solid #C0B49A;}#blockYellow{ background-color: #FFEEA6; border: 1px solid #C6BB85;}#blockBluegreen{ background-color: #B3E5E1; border: 1px solid #8FB2B2;}#blockGreen{ background-color: #ADE0B9; border: 1px solid #89AD92;}#blockBluegray{ background-color: #ABCECD; border: 1px solid #87A4A5;}#blockVioletBlue{ background-color: #B7CFED; border: 1px solid #92A5BC;}#blockGreenGray{ background-color: #D4EAFC; border: 1px solid #A7B8C5;}#blockBlue{ background-color: #ABE6ED; border: 1px solid #8AB1B9;}#blockLaver{ background-color: #C9C9F7; border: 1px solid #A09FB6;}#blockPurple{ background-color: #D5BEFC; border: 1px solid #A396B0;}#blockGray{ background-color: #DAE1E5; border: 1px solid #ACB2B7;}--> </style><title>Simple Color Picker</title></head> <body> <form id="form1" name="form1" method="GET" action=""> <label>Select Your Color <select name="colorPicker1" id="select"><option id="blockPink" value="blockPink"> blockPink </option><option id="blockRed" value="blockRed"> blockRed </option><option id="blockOrange" value="blockOrange"> blockOrange </option><option id="blockBrown" value="blockBrown"> blockBrown </option><option id="blockYellowOrange" value="blockYellowOrange"> blockYellowOrange </option><option id="blockYellow" value="blockYellow"> blockYellow </option><option id="blockBluegreen" value="blockBluegreen"> blockBluegreen </option><option id="blockGreen" value="blockGreen"> blockGreen </option><option id="blockBluegray" value="blockBluegray"> blockBluegray </option><option id="blockVioletBlue" value="blockVioletBlue"> blockVioletBlue </option><option id="blockGreenGray" value="blockGreenGray"> blockGreenGray </option><option id="blockBlue" value="blockBlue"> blockBlue </option><option id="blockLaver" value="blockLaver"> blockLaver </option><option id="blockPurple" value="blockPurple"> blockPurple </option><option id="blockGray" value="blockGray"> blockGray </option> </select> </label><input type="submit" name="submit" id="button" value="OK" /></form><div id="block"><?PHP if (isset($_GET['colorPicker1'])) echo '<div id="'.$_GET['colorPicker1'].'">Selected Color: '.$_GET['colorPicker1'].'</div>';?></div></body></html>

Edited by kanchatchai
Link to comment
Share on other sites

Looks good. Do you see any advantage to making the value in the input match the color selected? If so, can you make that change?

Link to comment
Share on other sites

SOME PHP CODE.<form id="form1" name="form1" method="GET" action=""><label>Select Your Color<select name="colorPicker1" id="select" <?PHP if (isset($_GET['colorPicker1'])) echo ' style="background-color:'.$_GET['colorPicker1'].'"'; ?>><?php$r=0;while ($r <= 15){ $g=0; while ($g <= 15) { $b=0; while ($b <= 15) { $mycolor=dechex($r).dechex($r).dechex($g).dechex($g).dechex($b ).dechex($b ); echo '<option id="blockPink" value="'.$mycolor.'" style="background-color:'.$mycolor.'"'; if ((isset($_GET['colorPicker1']))&&($_GET['colorPicker1']==$mycolor)) echo ' selected="selected"'; echo '>#'.$mycolor.'</option>'; $b = $b+2; } $g = $g+2; } $r = $r+2;}?></select></label><input type="submit" name="submit" id="button" value="OK" /></form>

Edited by kanchatchai
Link to comment
Share on other sites

Or Use My Favorites Color. On First Code.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"><!--#block{width:250px;}#blockPink{background-color: #EFB4CF;border: 1px solid #BB8EA4;}#blockRed{background-color: #FCB895;border: 1px solid #C49176;}#blockOrange{background-color: #FCD192;border: 1px solid #C3A475;}#blockBrown{background-color: #E2D2C3;border: 1px solid #B1A79C;}#blockYellowOrange{background-color: #F7E5C1;border: 1px solid #C0B49A;}#blockYellow{background-color: #FFEEA6;border: 1px solid #C6BB85;}#blockBluegreen{background-color: #B3E5E1;border: 1px solid #8FB2B2;}#blockGreen{background-color: #ADE0B9;border: 1px solid #89AD92;}#blockBluegray{background-color: #ABCECD;border: 1px solid #87A4A5;}#blockVioletBlue{background-color: #B7CFED;border: 1px solid #92A5BC;}#blockGreenGray{background-color: #D4EAFC;border: 1px solid #A7B8C5;}#blockBlue{background-color: #ABE6ED;border: 1px solid #8AB1B9;}#blockLaver{background-color: #C9C9F7;border: 1px solid #A09FB6;}#blockPurple{background-color: #D5BEFC;border: 1px solid #A396B0;}#blockGray{background-color: #DAE1E5;border: 1px solid #ACB2B7;}--></style><title>Simple Color Picker</title></head><body><form id="form1" name="form1" method="GET" action=""><label>Select Your Color<select name="colorPicker1" id="select"><option id="blockPink" value="#EFB4CF"> blockPink </option><option id="blockRed" value="#FCB895"> blockRed </option><option id="blockOrange" value="#FCD192"> blockOrange </option><option id="blockBrown" value="#E2D2C3"> blockBrown </option><option id="blockYellowOrange" value="#F7E5C1"> blockYellowOrange </option><option id="blockYellow" value="#FFEEA6"> blockYellow </option><option id="blockBluegreen" value="#B3E5E1"> blockBluegreen </option><option id="blockGreen" value="#ADE0B9"> blockGreen </option><option id="blockBluegray" value="#ABCECD"> blockBluegray </option><option id="blockVioletBlue" value="#B7CFED"> blockVioletBlue </option><option id="blockGreenGray" value="#D4EAFC"> blockGreenGray </option><option id="blockBlue" value="#ABE6ED"> blockBlue </option><option id="blockLaver" value="#C9C9F7"> blockLaver </option><option id="blockPurple" value="#D5BEFC"> blockPurple </option><option id="blockGray" value="#DAE1E5"> blockGray </option></select></label><input type="submit" name="submit" id="button" value="OK" /></form> <?PHPif (isset($_GET['colorPicker1']))echo 'Selected Color: <input type="text" name="selectedcolor" style="background-color:'.$_GET['colorPicker1'].'" value= "'.$_GET['colorPicker1'].'">';?> </body></html>

Link to comment
Share on other sites

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Color Picker By Kanchatchai</title><script type="text/javascript"><!--function clickedColor(selObj){hex=selObj.options[selObj.selectedIndex].value;selObj.style.backgroundColor=hex;document.getElementById("colortext").value=hex;}//--></script></head><body><form id="form1" name="form1" method="GET" action=""><label>Select Your Color<select name="colorPicker1" id="colorPicker1" onchange="clickedColor(this)"> <?php$hexcolor = array("EFB4CF","FCB895","FCD192","E2D2C3","F7E5C1","FFEEA6","B3E5E1","ADE0B9","ABCECD","B7CFED","D4EAFC","ABE6ED","C9C9F7","D5BEFC","DAE1E5","BB8EA4","C49176","C3A475","B1A79C","C0B49A","C6BB85","8FB2B2","89AD92","87A4A5","92A5BC","A7B8C5","8AB1B9","A09FB6","A396B0","ACB2B7");foreach ($hexcolor as $mycolor){ $mycolor="#".$mycolor; echo '<option id="blockPink" value="'.$mycolor.'" style="background-color:'.$mycolor.'"'; if ((isset($_GET['colorPicker1']))&&($_GET['colorPicker1']==$mycolor)) echo ' selected="selected"'; echo '>'.$mycolor.'</option>'; } ?> </select></label> <input type="text" id="colortext" name="colortext" <?PHP if (isset($_GET['colorPicker1'])) echo 'value="'.$_GET['colorPicker1'].'"'; ?>><input type="submit" name="submit" id="button" value="OK" /></form>

Edited by kanchatchai
Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...