jQueryプラグインの習作をするために作成したモノではありますが、プラグイン化したことでかなり楽に使えるようになったので、気が向いたら使ってみてください。

ライブラリについて

HTMLを汚さず、簡単に画像のロールオーバーを実装できます。

ダウンロード

jquery.rollover.js - v1.0.4

ライセンス

MIT License

主な機能

• HTMLで指定するのは初期表示の画像だけ
• 指定された箇所でも _on が付いている画像は無視
• ロールオーバー画像をプリロード
• 拡張子は何でもOK (png, jpg, jpeg, gif, etc…)
• ロールオーバー画像を示す _on の部分を自由に変更できる

使用方法

画像を用意する

example.jpg をロールオーバーしたい場合は、名前の末尾に _on を付けた画像 example_on.jpg を example.jpg と同じディレクトリに入れておく。

JSファイルの読み込み

他のプラグインと同様、jQuery本体→プラグイン→設定の順で読み込み。

<script src="jquery.js"></script>
<script src="jquery.rollover.js"></script>

指定方法の例

最後の例のためにプラグイン化したと言っても過言では無い。

jQuery(function($) {
  // 基本
  $('#nav a img').rollover();

  // inputもいける
  $('form input:image').rollover();

  // 複数指定も楽々
  $('#nav a img, form input:image').rollover();

  // 引数で _on の部分を指定できる
  $('#nav a img').rollover('_over');
});

まとめ

• ロールオーバーする画像の末尾に _on を付ける
• _on の部分は引数で指定すれば変更も可能
• jQuery本体→プラグイン→設定 の順で読み込み