javascript,tutorials

Creating a simple color palette or color picker in javascript and html

1 Jun , 2009  

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 icon smile Creating a simple color palette or color picker in javascript and html



palette Creating a simple color palette or color picker in javascript and html

Click on any color to view the demo



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 icon smile Creating a simple color palette or color picker in javascript and html

 
<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

, , ,


5 Responses to “Creating a simple color palette or color picker in javascript and html”

  1. HongYen says:

    I want to use this code. Thanks!

  2. kriz says:

    hi i want to use it. its great!

  3. Carlos says:

    I want to use this code. Thanks!

  4. ravikanth says:

    pity cool aswom

  5. tuddy says:

    yo this is awesome. nice and simple.

More in javascript, tutorials (75 of 114 articles)


Last weak with the evolution of DigiMantra, i sadly had to lose disallow the access to my old domain i.e. ...