jquery、cssなどを使用して画像の一部の色を変更することは可能です

Question

私は違う花火を示す画像を持っています。私が言うコンボボックスがあるので、色が設定可能なようにしたい：

1. USA（赤、白と青の花火を色べき）
2. セントパトリックデー（花火に緑の様々な色合いに着色すべき。。。。
3. など

と私はそれは次のようになりたい：

またはこの：

花火が今、すべて単一の画像であり、上記＃1のために、それはすべて座って、赤、白、青を示すので、私は（選択した色を「混在」したいと思います並んで。 （画像の左側には、すべての青、右側等、すべての赤と比較。）

私はイメージを持っていると私は2つの選択肢があります

1. のための別々の画像を作成しますドロップダウンのすべての例
2. htmlページ内の画像の一部の色を動的に変更する方法があるかどうかを確認してください。
3. 他の提案??

＃2が可能だった場合や、＃1に固執する必要がある場合はフィードバックを得たいと思っていました。明らかにリストが長くなるにつれて、＃1はより迷惑になり、＃2はより魅力的です（可能ならば）

Answer 1

もう一つの提案は、花火をマスクとして反転させ、それを保持するボックス。

このようにして、単一のアルファ透明画像を使用して、色合いを得ることができます。

Answer 2

pngの透明度を使用できます。変更したい場所が透明になるように花火を作成します。その後、javascriptを使用して色を変更するdiv内に画像をラップします。

のサンプルコードは、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/