• RSS

[JS]マウスオーバーでカラー画像を白黒にできるjQueryプラグイン「jQuery.BlackAndWhite」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

カラーの画像をマウスオーバーで白黒に切り替えることができるjQueryプラグイン「jQuery.BlackAndWhite」について、設置方法と簡単なデモをご紹介します。

目次

jQuery.BlackAndWhite のダウンロード

以下のページより、jQuery.BlackAndWhite のファイルを一式ダウンロードします。


jQuery.BlackAndWhite の設置

ダウンロードしたBlackAndWhite.css ファイルと、jquery.BlackAndWhite.js、jqueryファイルを<head>内に設置します。



マウスオーバー時に「カラー→白黒」で表示

まずはカラーの画像を、マウスオーバーで白黒に切り替えます。

HTML 側ですが、画像を表示させる場所で以下のような記述をします。


続いて、<head>タグ内に以下のJavascript の記述を追加します。

HTML 側のbwWrapper クラスのリンクタグに対して、マウスオーバーによる画像切り替えを有効にする場合は、hoverEffecttrue にします。

また、「カラー→白黒」への切り替えの場合はinvertHoverEffecttrue にします。

speed は「カラー→白黒」へ切り替わる際の速度です。必要に応じてfadeIn fadeOut の値をそれぞれ調整します。


jQuery.BlackAndWhiteでカラーを白黒に切り替えるデモはこちらです。
「カラー→白黒」のデモ


マウスオーバー時に「白黒→カラー」で表示

jQuery.BlackAndWhite は「カラー→白黒」だけではなく「白黒→カラー」への切り替えも可能です。

<head>タグ内に記述するJavascript は以下のようになり、「白黒→カラー」の場合はinvertHoverEffectfalse にします。


jQuery.BlackAndWhiteで白黒をカラーに切り替えるデモがこちらです。
「白黒→カラー」のデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す