無料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公開
