A customer asked me if I could make a type system. Could anyone give me an idea of how to do this without Flash? It has a glass with a detail and the two objects will receive different colors selectable in a color palette.
Where to start with a project like this?
It mainly depends on the complexity of the image and the amount of colors in the palette.
If they are already pre-established colors, and the product image has many details, I believe it is more feasible to use different images of the product, one for each color.
But there are a number of solutions for applying color programmatically.
If the image is in vector, you can do it easily with SVG and jQuery. You can export, for example, an Illustrator image in SVG and manipulate the elements with jQuery to change the colors.
Here has a post explaining how to do this using Canvas and JavaScript, with this related .
This jQuery plugin looks very interesting.
To make the color selection through a palette, there are several jQuery plugins.
A purely JavaScript solution would be the jsColor plugin ( link ).
Example:
<script src="http://freecms.googlecode.com/svn/trunk/project/WebRoot/js/jscolor/jscolor.js"></script><inputclass="color">