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部分の@は必要ありません。

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