無料jQueryプラグイン [画像のロールオーバー]
単体バージョン:jquery.rollover.js
基本となる画像と、そのロールオーバー画像を用意します。ロールオーバー画像の名前は、基本となる画像名に『_on』をつけます。例えば、基本となる画像名が『rollover.png』であれば、ロールオーバー画像名は『rollover_on.png』となります。
ロールオーバーしたい画像を個別に設定することも出来ますし、例えば、あらかじめheadタグ内にて『$('.rollover').rollover();』と設定し、『.rollover』というクラス名を付けた画像に適用することも可能です。
スマートフォンの場合、ロールオーバー(ホバー)という概念がないので、代替的に、タップした時にマウスオーバー、離した時にマウスアウトと同じ効果にしています。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/style.css" media="all"> <script src="js/jquery.js"></script> <script src="js/jquery.slideshow.js"></script> <script> $(function($) { $('.bnr img').rollover(); }); </script> </head> <body> <ul class="bnr"> <li><a href="index.html"><img src="images/bnr01.jpg" alt=""></a></li> <li><a href="index.html"><img src="images/bnr02.jpg" alt=""></a></li> <li><a href="index.html"><img src="images/bnr03.jpg" alt=""></a></li> </ul> </body> </html>
CSS
特に必須の指定はありません。
更新履歴
- 2015-12-28
- ver1.1公開 一部ソースコードを修正しました。
- 2015-05-16
- ver1.0公開