0

I have a problem similar to How to change color of an image using jquery, but with a shoe. The problem is the shoe has multiple parts (heel, front, sole..) and i need to let the user change the color of each part. I'm working in jQuery or some Javascript-based framework.

What's the best approach for this? Is there a way of defining areas in an image to be colored independently? Or should divide the shoe in multiple images and get them together with CSS? (I don't like this idea...) Or.. none of the above? :)

Community
  • 1
  • 1
Jose A.
  • 125
  • 2
  • 8

1 Answers1

1

RaphaelJS is worth a look for that solution. Look at their World Map example

In fact, if you have a mean of precompute or fix your shoe part and set coordinates on it, you'll be able to draw and fill SVG polygons above the shoe. The difficult part is to know or determine the contour path's coordinates...

This site is using RaphaelJS for its overlays

Grooveek
  • 10,046
  • 1
  • 27
  • 37
  • Thanks for the suggestion. The example looks nice. It's closer to what i want. Like you said, the problem there it will be to define the parts contour. I can't do math formulas for that :D.. I don't know if there is some kind of preparation that could be done in photoshop for that purpose.. – Jose A. Jul 04 '12 at 13:58
  • Inkscape can help you to vectorize parts of your images – Grooveek Jul 04 '12 at 14:06
  • I don't know much about that but you're telling i can define the shoe parts in inkscape/illustrator and get that areas with RaphaelJS to color? – Jose A. Jul 04 '12 at 14:17
  • yes, right. Inkscape, for example, can produce SVG Files. So you can import your shoe raster as a background, draw upon it pathes to get contours (Inkscape has also an automatic contour detection, but it could be not as precise as you'd want) and produce svg from this drawing. You'll then have SVG coords you'll be able to enter in Raphael. i remember a [github project](https://github.com/wout/raphael-svg-import) which allow SVG direct import in Raphael. A bit raw, but works well for simple paths – Grooveek Jul 04 '12 at 14:59
  • Nice! I have to give it a try. Thank you! – Jose A. Jul 04 '12 at 15:20