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


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

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

IT/WEB業界への転職なら求人サイトGreen

今回は、以下のような機能がある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の使い方でした!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly