タグ: ロールオーバー

jQueryを使った画像のロールオーバー

まさに車輪の(以下略)なんですが、

  • jQuery使う事最近多い
  • jquery_auto.js(リンク先なくなってる!)やyuga.jsを使うまでもない時もある

という事でなんとなしに書こうと思った。

こうだったらいいなと思ったこと

  • シンプル
  • 拡張子の文字数にかかわらずに動く
  • input type="image"でも動く

コード

/**
 * rollOver on jQuery
 * rollOver tag:img,input
 * rollOver class:Over
 * rollOver FileName:*_o.*
 * Last modify:20081210
 * Licensed:MIT License
 * @author AkiraNISHIJIMA(http://nishiaki.probo.jp/)
 */

function rollOver(){
    var preLoad = new Object();
    $('img.Over,input.Over').not("[@src*='_o.']").each(function(){
        var imgSrc = this.src;
        var fType = imgSrc.substring(imgSrc.lastIndexOf('.'));
        var imgName = imgSrc.substr(0, imgSrc.lastIndexOf('.'));
        var imgOver = imgName + '_o' + fType;
        preLoad[this.src] = new Image();
        preLoad[this.src].src = imgOver;
        $(this).hover(
            function (){
                this.src = imgOver;
            },
            function (){
                this.src = imgSrc;
            }
        );
    });
}
$(document).ready(rollOver);

使い方

  • 上記のスクリプトファイルを読み込ませる
    例)
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="path/hoge.js"></script>
    
  • ロールオーバー画像名は、ロールオーバー前の画像に”_o”を付けたモノを用意する
    例)
    【fuga.png】→【fuga_o.png】
    
  • ロールオーバーするimgタグもしくはinputタグにclass="Over"を付ける
    例)
    <img src="fuga.png" alt="" />
    ↓
    <img src="fuga_o.png" class="Over" alt="" />
    

_oの画像にclass="Over"としててもチラチラになることはありません。
わかる人には、わかると思います。
ライセンス表記なくて、使用する時に迷ったりすることがよくあるので、
「自由に使ってくださいな」という気持ちで、コメント書いてます。
いつもは、こんなコメント書かないから、書き方正しいかどうかもわかりませんw
ここ間違っとるぞ!とかこここうやったらもっとスマートやぞ!とかあったらよろしく。
2010年1月10日追記:匿名さんのご指摘通り、jQueryの以前のバージョン用で書いてましたので、not部分の@は必要ありません。