jQueryだけで画像のロールオーバーを実装するjQuery.RollOverの使い方

シンプルにロールオーバーを実装する方法

リンク用途などにおいて画像のロールオーバーはかなり頻繁に利用されていますが、これをシンプルに実現できるようにするプラグインをご紹介。

今回は、以下のような機能があるjQuery.rollover.jsを使用していきます。

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

このスクリプトを実行するにはjQueryが必要になります。公式サイトから最新版をダウンロードしてください。

使い方

• jQueryをHEADタグ内で読み込みます。
• jquery.rollover.jsをjQueryの直後に読み込みます。

  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.rollover.js"></script>
  

• 自動でマウスオーバーを指定した画像に「 _on」というファイル名を指定します。
  例えばa.jpgをマウスオーバー処理したい場合には、a_on.jpgというファイルも同階層に用意します。

  そして、ロールオーバーしたい要素をjQueryで指定します。

  jQuery(document).ready(function($) {
    $('#nav a img').rollover();
  });

• これで設定は完了です。

以上、jQueryだけで画像のロールオーバーを実装するjQuery.RollOverの使い方でした！