Struggling with concept

[Lacklustre]

below is what I am trying to achieve,just not sure what method would be best to enable it to be created !!

Imagine an image of a white tshirt. On this shirt are 5 irregular polygon shapes. I need to be able to allow the visitor to change the color of each polygon independantly. Each polygon could be one of 4 colors. How would i do this without creating an image for every possible combination which is about 100 (?)

I thought of slices, but the layout doesn't allow rectangles to be drawn around them without overlapping another one.

Anyone got any suggestions for what direction i should head?

Many Thanks

Sean

[scragar]

you shouldn't need to worry about them overlapping, as long as you assume that the background to each shape should be transparent.

As for the combo's of the shapes I've got a bit of fun maths for you, 5 shapes, each having 1 of 4 colours = 4^5 = 1024 combo's.

as long as your server has the ram to handle it I personaly would go for dynamic image editing and caching that way as each image get's called it is stored for future use if needed, while still keeping HD usage to a min(and you could also delete these images if more space was needed, it would be nice to have your top 20 or so images cached though)

[evano]

I'm not entirely positive, because I haven't had the opportunity to use it yet, but it seems like Walter Zorn's JavaScript VectorGraphics Library (http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm) may be what you're looking for. It allows you to create polygons of any shape, filled or not. The shapes can be drawn in DIVs or on the webpage itself. It's cross-platform and relatively light-weight. If the user doesn't have to click the polygon directly, it would be trivial to set up a set of buttons or radio buttons which erase and redraw the polygon in the specified color.

Or, if you wanted to, it would be really easy in Flash.

[ray326]

Are these five fixed shapes to which the color is applied? If so you've just got 20 images to handle it all. Or you could use 5 "hollow" shapes in 5 divs to which you change the background-color. Now you're down to 5 images total.