Как менять цвет на участках растровой картинки по клику?

Question

[Andrey Dontsov]

Привет!

Есть фото кухни, верхний ряд шкафов и нижний ряд.
Как можно решить задачу изменения цвета фасадов по клику по кнопке выбора цвета (маркера)?
Т.е. есть фото и есть три кнопки, допустим, синяя, красная и зеленая.
Три кнопки(цвета) для верхних шкафов и три для нижних.
Клик по верхней синей - и цвета фасадов верхних шкафов стали синими... и т.д.
Клик по желтой нижней - нижние шкафы стали желтыми.
При этом картинка растровая!

Подскажите пожалуйста как бы вы это реализовали?

Есть вариант иметь кучу самих картинок и менять url при клике на тот или иной цвет, подставляя нужную.
Но, возможно, это не единственное и не самое лучшее решение?!

Спасибо!

Comments

[Alex]

Если картинку векторной не сделать, я бы разрезал растровую на куски и подменял бы не всю картинку а только нужные части (вырезать двери отдельно.)

Answer 1

[Антон Шаманов]

Можно использовать

<map name="имя">
  <area атрибуты>
</map>

Comments

[Andrey Dontsov]

Спасибо, Антон, вы открыли для меня что-то новое)

Answer 2

[L0k1]

я бы спер реализацию отсюда
codepen.io/noahblon/pen/ZbjmbK

Comments

[Andrey Dontsov]

конечно прикольно, даже круто, но ie не у дел, на реальном проекте такое не применишь. Но все ровно спасибо, круто сделано!