Dynamic area painting.

Question

I have such drawing (It can be in a vector format):

It is necessary for me to place it on a site and dynamically to paint it. The user chooses colour (of walls and roof)and both the wall and a roof on a picture change the colour (according to a choice of the user).

The set of colours is not limited.

What technology to use for the decision of this problem (I think that it should be client-side technology)?

Variants: pure css, canvas + javascript, jQuery, ...

Restriction: we do not use flash technology.

Answer 1

for firefox and chrome, you have the canvas element available (although i don't believe 3d contexts are implemented, if that matters). those 2 also support svg. internet explorer has vml available, if you can deal with changing your doctype and maybe jumping through some other hoops. you can use javascript to plot all the points and whatnot. additionally, you can write vml inline with the page.

Answer 2

I chose the library Raphael.

I save the picture in the format svg and with the tool http://onlypaths.com/aaopblog/2009/11/7/ convert svg to Raphael format (record, understandable for Raphael).

Next - required fields fill with the color by a super-library Raphael.

---

Another translation tool from svg a format understandable for Raphael - http://bkp.ee/atirip/