Webtech Walker

画像ロールオーバーのjavascript

画像のロールオーバーには主にjqueryのプラグインを使ってたんですが、jqueryを使えない案件があってjqueryを使わないでロールオーバーを実現するライブラリを探したけど自分好みの仕様のものが見つからなかったんで自分で書いてみました。

ダウンロード
サンプル

使い方

  1. ダウンロードしたjavascriptを読み込む
  2. ロールオーバーしたい画像のimg要素にclass="hoverImg"を指定(スペース区切りの複数指定も可)
  3. 通常時の画像「xxx.gif」とロールオーバー後の画像「xxx_ov.gif」を準備(同じ場所におく)

指定するclass名(hoverImg)とロールオーバー後の画像の接尾語(_ov)はjsの以下の箇所を書き換えれば変更できます。

var targetClassName = "hoverImg";
var suffix = "_ov";

ライセンスとか

MITライセンスです。ご自由にお使いください。ただし使用に関しては自己責任でお願いします。

このエントリーをはてなブックマークに追加