以前ブログにも書きましたjQuery用のプラグイン、jquery.monochromer.jsですが、ある件でこのプラグインを紹介してくださるらしく、ちょっと改良しました。

色を指定できるデモとソースのダウンロードはこちらでお願いします。

どういったものかというと、img要素にこれを適用すると画像がモノクロになるというものです。
適用方法は簡単で、jQueryを読み込んだ後このプラグインを設置し、指定するだけです。

一番シンプルなカタチ。
monochromerをデフォルトの状態で与えてください。
img要素がグレースケール化します。
本の画像にマウスを乗せるとカラーになります。

今回はイヤラシく、僕も執筆に参加した宣伝も兼ねて「Facebookページ　プロフェッショナルガイド」のサムネイルを使います、ゴメンナサイ。

$(".demo01 img").monochromer();

改良点ですが、HTML5のcanvasを使っています。
IE8までは、「なにもしないプラグイン」というように、内部でブラウザ判定をしてます。
つまりIE6などでは、画像が表示されるだけなので、必要最低限の表示は出来ます。
新しいブラウザは機能が増え、古いブラウザはそのままで、、という感じでしょうか？

今度はカラーを指定します。
monochromerのcolorパラメータに、16進数のCSSカラー値を指定します。
この例は#f00、もちろん#ff0000でもOKです。

$(".demo02 img").monochromer({color: "#f00"});

しかし、いきなりページが表示されて画像がモノクロになるとおかしいですね。
通常はカラーのまま、マウスオーバーでモノクロ、という流れにしたいときには、typeパラメータを"false"にしたらOKです。

$(".demo03 img").monochromer({color: "#f00", type: false});

実はcanvas要素を生成して、span要素でラップ

内部的にcanvas要素を生成して、img要素のピクセルをcanvasに取り込み、変色させています。
img要素とcanvas要素はCSSのpositionで重ねて、その親にspan.monochrome-wrapという要素を生成しています。

レイアウトをするとき、img要素にmarginとpaddingとborderとfloatを指定すると、span.monochrome-wrapに適用します。
しかし他のCSS設定は無視されますので、例えばtransformとかで、マウスオーバーでscaleによって大きくしたり、とかが出来ません。
なので、内部的に生成されたspan.monochrome-wrapに対してCSSを当てるといいです、以下のようなCSS設定でマウスを載せると大きく見せられます。

.demo06 span.monochrome-wrap {
-webkit-transition: .3s;
}

.demo06 span.monochrome-wrap:hover {
-webkit-transform: scale(1.2);
}

将来的には、img要素に指定したCSSプロパティを全部span.monochrome-wrapに適用させたいところ。
実は試したのですが、クロスブラウザの作業でどうしてもうまくいきませんでした。
ぜひ改良したいなあ、と思います。

あと大事なことなんですが、canvasの仕様でドメインの違う画像のピクセルを操作することは出来ないことに鳴っているようです。なので、同じドメイン内の画像だけにおいて使うとよいでしょう。