JavaScriptの画像の色を変更する

Question

マップ画像の色を動的に変更したい（青から赤など）。 そして私はIEをサポートしなければならないのでキャンバスを使用することはできません。javascriptを使用してクライアント側でイメージを操作する方法はありますか？

Answer 1

透明なスペーサイメージを使用し、クラス名を使用して設定されたCSSセレクタに実イメージURLを背景イメージ属性として配置するなど、新しいリソースとしてフェッチします。

画像のclassNameを変更すると、画像が置き換えられるはずです。嫌なことはクライアント側には必要ありません。

Answer 2

あなたがしなければならないことに応じて、純粋なCSSを使用して背景画像のビューポートを移動できます。このサイトのトップナビゲーションメニューをご覧ください： http://grotonhomesforsale.com

テキストの上にマウスをかざすと、どのように表示されるのですか？

Answer 3

色の変化が非常に偏っている場合（微妙なグラデーションの変化が少ない場合）、画像の色付き部分に透明な「穴」を付けることができます）IE6をサポートするために、8ビットのPNGまたはGIF形式を使用して、実際の色に背景色を設定します。これは、「クライアント側で画像を操作する」ためにあなたの探求には対応していません

<!-- mymap.png contains a transparent "hole" for color --> 
<img id="colorme" src="mymap.png" style="background-color:red" /> 

<script> 
// change the color to blue: 
document.getElementById('colorme').style.backgroundColor = 'blue' 
</script> 

。任意の方法で画像を操作することは、キャンバスやIE専用のvmlの一部で可能です。しかし、単純な色の変化であれば、このトリックで十分です。

Answer 4

現在、IEはIE 9から開始するキャンバスをサポートしているため、キャンバスに変換してIEで画像を操作することは可能です。

このjqueryプラグインについて考えることができます。それは使いやすいです。

$("#myImageID").tancolor(); 

インタラクティブdemoがあります。あなたはそれで周りを遊ぶことができます。

使い方のドキュメントを参照してください。かなり簡単です。 docs