Allowing website users to change colors in an image?

I'm a "skilled amateur" web designer, and I'm looking for a way to allow visitors to change the colors in an image by clicking on a color selector. In other words, image is black, red, and white - I want them to be able to change all the red area to blue, etc.

I know I've seen this done, and there must be a script somewhere. It only needs to be basic web colors. I found a script that changes the whole palette for the site, but not an individual image.

Any help is appreciated.

Thanks!

 

So your really just switching between a series of images using a series of coloured buttons? Just look for a basic image swap piece of javascript

 

That would definitely be a way to do it, especially if there are only a few colors. However, I was thinking of having a color palette where the user could select a color to fill in pre-defined areas on an image (I guess imagine a paint-by-numbers where the user could pick the color for each number). I'm thinking this would be a flash application, but I'm not a flash programmer, so I was hoping there was something I could find or purchase that would do the trick.

 

No love on this question, but I'll try again. I have to believe there is something pre-made in Flash that can pull this off, I'm willing to pay for a module if necessary. I'm trying to do a real basic version of the Color Visualizer at Sherwin-Williams. For instance, not a photo, but maybe a graphic with 3 or 4 colors where you could change green to red, etc. I've googled this to death, so either I'm looking in the wrong place, or it doesn't exist. Thanks again for any help.

 

Ok, so I think I found a script for this purpose (MapColorsFilter from JH Labs), but I'm not 100% sure how to implement it. Would this change the color of every pixel on the whole page? If so, I guess I would have to use colors in the image that are not used anywhere else in the page.


package com.jhlabs.image;

import java.awt.image.*;

/**
* A filter which replaces one color by another in an image. This is frankly, not often useful, but has its occasional
* uses when dealing with GIF transparency and the like.
*/
public class MapColorsFilter extends PointFilter {

private int oldColor;
private int newColor;

/**
* Construct a MapColorsFilter.
*/
public MapColorsFilter() {
this( 0xffffffff, 0xff000000 );
}

/**
* Construct a MapColorsFilter.
* @param oldColor the color to replace
* @param newColor the color to replace it with
*/
public MapColorsFilter(int oldColor, int newColor) {
canFilterIndexColorModel = true;
this.oldColor = oldColor;
this.newColor = newColor;
}

public int filterRGB(int x, int y, int rgb) {
if (rgb == oldColor)
return newColor;
return rgb;
}
}

 

I can give you logic coz i have done this before for a college student. Take an image. Give 2 color dialog, first will select a color to be swapped and second will give a color with which first color should be replaced. now store both color in RDG format in 2 different variables. Now take 2 loops. One will loop from 1 to height of the picture. In the first loop take second loop which will loop from 1 to width of the pic. Inside the loop just get the pixel color, if its match with first color then set that pixelcolor with second color. Dont know which language u r using but u can do it with getpixel and setpixel. If you are not clear with this explanation you can contact me back.