Jamesはここにあります。私は50以上のチュートリアルを見てきましたが、簡単なコンパクトなjQueryのグレースケールチュートリアルを見つけることはできません。私が試したすべてのスクリプトは、これを有効にしようとしているサイトでは機能しません。誰かが私の旅の中で、高さを使わずにイメージを作成するスクリプトを持っていても、500pxグレースケールのページを読み込んでいても、ホバー上の色に変わってしまうのであれば、助けになるだろう。このスクリプトはHTML5 Canvasを使用すると信じています。あなたはキャンバスを使用する必要がJavaScriptでそのような何かをしたい場合はhttp://jamestestblog.tumblr.com/jQueryは画像をグレースケールにします
：私は上でこれを行うにはしたいと思い
ます。 jQuery自体ではこれを行うことはできません。しかし、選択肢があります。最も簡単なのは、スプライトまたは2つの異なる画像を重ね合わせてアニメーション化することです。隠す|ショー。
画像がたくさんある場合、別のオプションは、バックエンドのphpにgdライブラリのようなものを使用することです。その後、簡単なPHPファイルからajaxを使って動的にロードすることができます。
2つの画像を使用することはできません。 –
スプライトはどうですか？ – elclanrs
私はそれを使うことはできません。私は実際に私が投稿した写真を作っていないウェブブログでこれを達成したい、私は単にそれらを再編集する。私は各画像のグレースケールバージョンを作成する時間がなく、各画像はタグを使ってコード化されていません。{block：Photo}
{/ block：Photo} –
セキュリティ上の理由から、javascript要素とcanvas要素は、別のドメインから取得した画像を変更することはできません。
で詳細を参照してください。このためのライブラリがありますhttp://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements
のようにコード化されています。このようなイメージをソースとして使用したキャンバスのコンテンツを取得することはできませんが（キャンバス全体がロックされてしまうため）、キャンバスを操作することはできます。参照されている記事に記載されているメソッドだけが利用できませんが、グレースケール変換を実行する必要はありません。 – Ext3h
は、あなたが見なければならないHoverizrと呼ばれます。
Hoverizrが 機能をproccessing
<canvas>要素の画像を利用しています。これが意味することは、Hoverizrがそれぞれの画像を別々のピクセルの情報に変換してそれを処理するということです。次に、操作した画像を の元の位置にするか、元の位置に戻すかによって、上の要素の上にマウスを置くと、下の要素が表示されます。
コードは次のようになります。
$('#imageid').hoverizr({effect:"grayscale"});
これはうまくいかなかった！ :( –
これはhttp：//jamestestblog.tumblrのためです。com /と同じような画像：http://29.media.tumblr.com/tumblr_lvxhd8XX511qiv23bo1_500.jpg right？ブラウザ（Chrome、Firefox、またはIE）のデバッグツールで、どのようなエラーが発生しましたか？おそらくJavaScriptエラーがありますか？あなたが持っているエラーをあなたが共有していれば役に立ちます。 – artlung
あなたはここで解決策を見ているかもしれません：http://stackoverflow.com/questions/286275/gray-out-image-with-css – artlung
あなたは確認しました：http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-cssを？ – Alexander
コード[here]（http://stackoverflow.com/questions/7502271/understanding-how-canvas-convertts-an-image-to-black-and-white）はうまく動作します：http://jsfiddle.net/ bhkEt /。 – pimvdb
@Alexander私はそれを理解していません..... –