Image color change

[gparis]

Hello guys!

I'm having serious troubles painting a PNG image. All the threads I see change the background color as well.

I need to change the color of a customizable item I want to sell (i.e. glasses: changing color of the glass or temples or front) whenever the customer push a button on a color panel next to it.

I've start splitting the original image in 4 .png parts (in the example: glass, front part, left temple and right temple) and I would place them one above the others. How could I change the color of a the right temple, for example?

Is it possibly to color it with a non-solid color? I mean, respecting the shadows or reflections of the image (like Photoshop does).

Thank you team.

[dsonesuk]

I doubt it can be done with reasonable effect, since you say 'like photoshop' why not create necessary images through photoshop as sprite image http://www.w3schools.com/css/css_image_sprites.asp then change to required image when selected.

[justsomeguy]

If you don't care about supporting IE (Edge works though), you can use the CSS filters to tint the image, specifically the hue-rotate filter:

 

https://davidwalsh.name/css-filters

 

Check the demo on that page in a modern browser. In that case you would build the image like you suggest, with different parts (each image should have a transparent background, not a solid color white background), and you can apply the filter to tint the image to whatever color you want. Start with a white image of the frames and tint it from there.