ist es möglich, die Farben auf Teilen eines Bildes mit jQuery, CSS, etc - jQuery, HTML, CSS, Bild, Farben zu ändern

Ich habe ein Bild, das verschiedene Feuerwerke zeigt. Ich möchte die Farben konfigurierbar machen, damit es eine Combobox gibt, die sagt:

1. USA (die das Feuerwerk rot, weiß und blau färben sollen)
2. St. Patricks Day (der das Feuerwerk in verschiedenen Grüntönen färben sollte).
3. etc . .

und ich möchte, dass es so aussieht:

oder dieses:

Das Feuerwerk ist im Moment alle ein einziges Bildund ich würde die ausgewählte Farbe "vermischen" wollen (so dass für # 1 oben Rot, Weiß und Blau nebeneinander liegen. (Im Vergleich zur linken Seite des Bildes ist alles blau, die rechte Seite ist alles rot.) , etc. .)

Also habe ich ein Bild und ich habe zwei Möglichkeiten:

1. Erstellen Sie für jedes Beispiel in der Dropdown-Liste ein eigenes Bild.
2. Prüfen Sie, ob es eine Möglichkeit gibt, die Farben von Bildteilen innerhalb einer HTML-Seite dynamisch zu ändern
3. andere Vorschläge?

Ich wollte Feedback bekommen, ob # 2 möglich ist oder ich sollte bei # 1 bleiben. Offensichtlich wird # 1 mit zunehmender Länge der Liste ärgerlicher und # 2 ist ansprechender (wenn möglich).

Antworten:

3 für die Antwort № 1

Mein anderer Vorschlag wäre, das Feuerwerk als Maske umzukehren und eine Hintergrundfarbe in dem Feld zu verwenden, in dem es sich befindet.

Auf diese Weise erhalten Sie Ihre Farbtöne nach Belieben mit einem einzigen Alpha-Transparenz-Bild.

---

1 für die Antwort № 2

Sie können die Transparenz von png verwenden. Erstellen Sie das Feuerwerk so, dass die Stelle, an der Sie Änderungen vornehmen möchten, transparent ist. Schließen Sie das Bild dann in ein div ein, wodurch sich die Farbe mit Javascript ändert.

Im Folgenden finden Sie einen Beispielcode für die Verwendung von jQuery

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

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

html

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

Demo: http://jsfiddle.net/wyZnc/

---