及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > JavaScript > 画像をマウスオーバーでグレースケールからカラーへ Hoverizr

画像をマウスオーバーでグレースケールからカラーへ Hoverizr(jQueryのプラグイン)

2015/04/15
画像（カラー）をグレー表示し、マウスオーバーで元のカラー、という動きにしたい。
CSS3を使ったりHTML5のCanvasを使ったりなど、色々方法が有るようだが、
jQuery のプラグイン Hoverizr を試してみた。

表示例

マウスオーバーで変化。
  • グレースケールからカラー。 flower
  • カラーからグレースケール。 flower
グレースケール以外のエフェクト。
  • ぼかし。 flower
  • 反転。 flower

設置例

Hoverizr のダウンロード（GitHub）
Hoverizr
このページの右側の[Download ZIP]ボタンからダウンロード。
ダウンロードしたZIPファイル（Hoverizr-master.zip）を解凍し jquery.hoverizr.js または jquery.hoverizr.min.js を使用する。

<head> 内

jQuery(下記の例ではjQueryのCDN)と jquery.hoverizr.js を読み込ませる

エフェクト等の効果を設定。実行。
画像をセンター合わせにしたいとき
ちなみに、画像をセンター合わせ（親要素に中央揃え）にする方法。
前述の、エフェクト等の効果の設定で「width: "200px"」というように、幅をサイズで指定した場合に有効。

CSSを設定する。
まず、画像を囲む親要素のスタイルを position:relative にする。
そして、前述の、エフェクト等の効果の設定のところで「container:」に設定したクラス名のスタイルを下記のようにする。

【例】「container: "overlayed"」と設定した場合 
.overlayed {left:0;right:0;margin:auto;}

body 内

画像のclassに、hoverizrで設定したclass名を設定。
<img src="images/sample.jpg" class="my_img_class" />

class名は、head 内で設定した、
-----
$('my_img_class').hoverizr({
-----
の箇所の'my_img_class'（任意の名前でOK）。
MENU Ξ