Color palettes are one of the prime resource of a web 2.0 website. There are many color picker codes available online, but they all involve lot of coding and pasting stuff here and there. And some useless CSS and input boxes, which in result mess up the core code. Well here I have designed a simple color picker, which is done using image map instead of span or div technique. Its very basic and really really effective to use.
if you want to use it, please leave a comment with your URL address and you are free to use 🙂
You can create a bigger or a small picture. Some people find mapping an image a hectic job, but i do it using Dreamweaver. Its really a nice editor for web designers. For the above image, i created it in photoshop and gave some shadow effect and then mapped its co-ordinates using dreamweaver, here is another post which shows you how to create image maps using Dreamweaver
The complete code for the above script is down here 🙂
<script type="text/javascript"> function getColor(block) { var s_url=block.href; var pColor=s_url.substr(s_url.indexOf("#")); document.getElementById("colorPalDemo").style.backgroundColor=pColor; document.getElementById("colorPalDemo").innerHTML=pColor; } </script> <img src="http://www.digimantra.com/blog/wp-content/uploads/2009/06/palette.gif" usemap="#color_pallete" /> <map name="color_pallete" id="color_pallete"> <area shape="rect" coords="7,7,31,30" href="#003300" onclick="getColor(this);" /> <area shape="rect" coords="35,7,59,30" href="#003366" onclick="getColor(this);" /> <area shape="rect" coords="63,7,87,31" href="#000080" onclick="getColor(this);" /> <area shape="rect" coords="92,7,115,31" href="#333399" onclick="getColor(this);" /> <area shape="rect" coords="7,33,30,58" href="#008000" onclick="getColor(this);"/> <area shape="rect" coords="36,34,59,57" href="#008080" onclick="getColor(this);" /> <area shape="rect" coords="63,34,86,58" href="#0000ff" onclick="getColor(this);" /> <area shape="rect" coords="92,35,115,57" href="#666699" onclick="getColor(this);" /> <area shape="rect" coords="8,61,31,85" href="#339966" onclick="getColor(this);" /> <area shape="rect" coords="35,62,59,85" href="#33cccc" onclick="getColor(this);" /> <area shape="rect" coords="64,61,86,85" href="#3366ff" onclick="getColor(this);" /> <area shape="rect" coords="92,61,115,85" href="#800080" onclick="getColor(this);" /> <area shape="rect" coords="91,88,115,111" href="#993366" onclick="getColor(this);" /> <area shape="rect" coords="64,88,87,111" href="#00ccff" onclick="getColor(this);" /> <area shape="rect" coords="36,88,59,112" href="#00ffff" onclick="getColor(this);" /> <area shape="rect" coords="8,88,30,111" href="#00ff00" onclick="getColor(this);" /> </map> <span id="colorPalDemo" name="" class="" style="height:50px;width:50px;display:block;color:#ffffff;"></span> |
The important part is map name and usemap attribute’s values, please make sure they are same for the respective image and its map. Also when user click the getColor function in JavaScript handles the color code which is there in href attribute, and then it processes it.
Any doubts, feel free to leave a comment.
Cheers!!
Sachin Khosla
