I need to design a part of webpage like below the image. In the left side, there is color options. If the user pick any color from the left side and click on the image part, the part of the image should get filled by the picked color. I spent more time to google search. Most of the sites used flash only. But i do not know flash very well. Is it possible to achieve using jquery plugin?

I need to design a part of webpage like below the image. In the left side, there is color options. If the user pick any color from the left side and click on the image part, the part of the image should get filled by the picked color. I spent more time to google search. Most of the sites used flash only. But i do not know flash very well. Is it possible to achieve using jquery plugin?

• javascript
• jquery
• html
• css

• There is HTML5 Canvas option to do this or you can simply do it with CSS and PNG images depending on how many colours you have. – TheBlackBenzKid Commented Sep 11, 2012 at 11:54

5 Answers 5

You'll probably want to look into the <canvas> element. As for filling a particular bit of the image when clicked, you may want the floodfill algorithm.

Really this can be done simply, if you have strict control over what png files you use.

For example, you can make the png fully opaque with the exception of the area you want to colour.

Then you can load the image and just set the background colour of the element you are using when a colour is clicked.

Something like this:

$(".ColorOption").click(function(e){
   e.preventDefault();
   var color = $(this).data("color");
   $("#MainImageBackground").css("background-color", color);
});

assuming you set up your colour options using the data attribute like so:

<a data-color="#F00"></a>

with your image something like:

<div id="MainImageBackground">
   <img src="whatever"/>
</div>

You can solve this with Javascript, but therefore you need for every color a own image.

<script language="JavaScript" type="text/javascript">


function changePic(picColor)
{
  if(picName == "btnRed")
  {
    document.getElementById(mainPic).src = "mainPicRed.jpg"
  } 
  else if(picName == "btnYellow")
  {
    document.getElementById(mainPic).src = "mainPicYellow.jpg"
  } 
}

</script>

HTML for every color button:

<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">

Idea 1: User the canvas element and look at fill methods, this is probably going to be more plex than flash.

Idea 2:

1. Create transparent PNG where the colourd area is the only part that is transparent.

2. Create 2 DIVS, 1 at z-index 10 and other at 20, same size, same position

3. Place image in top div which is z-index 20. Then change the colour of the background in div 1 which is at z-index 10.

To accept any png and fill the middle:

You can find information on the floodfill algorithm in javascript here:

http://jsfiddle/loktar/ZLw9m/

However your implementation will have to be more advanced as you need to convert the image to a format javascript understands (0's and 1's for example) and then run the algorithm on that

As @musefan pointed out if you can control the PNG's this is much easier