CoolWebWindow

自作したjQueryプラグインを無料配布しているサイトです。
jQueryプラグインは商用利用可能、MITライセンス表示、カスタマイズ無制限です。

無料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公開
ページのトップへ戻る