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

  • 投稿日
  • 更新日
  • 著者 nishiaki
  • カテゴリー Blog

まさに車輪の（以下略）なんですが、

  • 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(https://nishiaki.probo.jp/wp/)
 */

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

javascript jquery ロールオーバー

この記事を書いた人

nishiaki

記事一覧