Как при помощи клика менять цвет области на картинке/бэкграунде блока ???

Question

[BB 8]

Пример сайта где реализована подобная функция, но на флеше: potolok-altezza.ru

С помощью чего подобное можно сделать на html/css/js ???

Comments

[Kovalsky]

Вероятно, проще всего это сделать на SVG, чтобы по клику просто менять цвета заливки/градиентов, но в подавляющем большинстве случаев такие фишки делают просто с помощью большого количества картинок отличающихся только цветом, как и просто с помощью абсолютно позиционированных элементов, так и на canvas.

[BB 8]

Никита Полевой: svg + событие по клику, которое будет добавлять нужный бэк + опасити ?

[Kovalsky]

BB 8: ну, специфика значения не имеет, соль в использовании векторной графики и контейнеров внутри неё. Но можно и так.

Answer 1

[asdz]

думаю вам придется разбить изображение на компоненты, заготовить все меняющие цвета компоненты в разных цветах, описать общую картинку в виде json модели (метаданные: какой компонент по каким координатам расположен, и его варианты) обработать и скомпоновать на канвасе с помощью js общую картинку. Затем отслеживая действия по мыши, выполнять замену тех или иных блоков в соответствии с метаданными.