можно ли изменить цвета на частях изображения с помощью jquery, css и т. д.

Question

У меня есть изображение, которое показывает различные фейерверки.Я хочу, чтобы цвета были настраиваемыми, поэтому есть поле со списком:

1. США (который должен окрашивать фейерверк в красный, белый и синий)
2. День Святого Патрика (который должен окрашиватьфейерверк различных оттенков зеленого.
3. и т. д.

и я хочу, чтобы это выглядело так:

или это:

фейерверк - это все одно изображение прямо сейчас, и я хотел бы «смешать» выбранный цвет (так что для # 1 выше, он показывает красный, белыйи синий все сидят рядом (по сравнению с левой стороной изображения все синее, правая сторона вся красная и т. д.)

, поэтому у меня есть изображение, и у меня есть два варианта:

1. Создайте отдельное изображение для каждого примера в раскрывающемся списке.
2. Проверьте, есть ли способ динамического изменения цветов частей изображения на HTML-странице
3. другие предложения ??

Я хотел бы получить отзыв о том, если # 2 было возможно, или я должен придерживатьсяс # 1.очевидно, что по мере того, как список становится длиннее, № 1 становится все более раздражающим, а № 2 более привлекательным (если это возможно)

Answer 1

Ну, мое другое предложение было бы сделать фейерверк в виде маски, перевернутым и использовать базовый цвет фона в рамке, в которой он находится.

Таким образом, вы получите цветовые оттенки так, как вам нравится, с одним альфа-прозрачным изображением.

Answer 2

Вы можете использовать прозрачность PNG. Создайте фейерверк так, чтобы место, которое вы хотите изменить, было прозрачным. Затем оберните изображение в div, который изменит свой цвет, используя JavaScript.

Пример кода ниже с использованием jQuery

$("#green").click(function() {
    $("div").css("background", "green")
});

$("#yellow").click(function() {
    $("div").css("background", "yellow")
});

HTML

<div><img src="path-to-image.png"></div>

Демо: http://jsfiddle.net/wyZnc/