jQueryで画像をロールオーバーする方法

Javascript

jQueryを使って画像をロールオーバーする方法は、いろいろあると思いますが今回はclassを指定して使用する方法をご紹介します。

探し回って見つけたのがこちらのサイト

使用方法

使用方法も配布サイトに詳しく書いてあります。設置をしたらロールオーバーしたいimgタグにclass="Over"をつけて、 画像名でロールオーバーする前の画像名の拡張子の前に「_o」をつけるだけです。

/**
 * 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);