お手軽な(？)ロールオーバーイメージ

【覚え書き】
どこで拝見したか忘れてしまったけど(;^_^A
自分なりのカスタマイズを加えさせて頂きました。

Ex.)
_off と _over のファイル名が付いた画像ファイルを用意。
HTMLドキュメントに下のjsファイル読み込みとimage_off.jpg（通常のイメージファイル）を配置。
その画像をロールオーバーするとimage_over.jpg（ロールオーバーのイメージファイル）に切り替わる。


【rollover.js】
//---------------------------------
//   Image Preload & Roll Over
//---------------------------------

/* Roll Over */
function setRollOver() {
    if(!document.getElementsByTagName) return false;
    var ovrImgList = document.getElementsByTagName("img");
    for(var i = 0; i < ovrImgList.length; i++) {
        if(ovrImgList[i].src.match(/_off./i)) {
            preLoadImg(ovrImgList[i].src.replace(/_off./i,"_over."));
            ovrImgList[i].onmouseover = function() {
                this.src = this.src.replace(/_off./i,"_over.");
                return false;
            }
            ovrImgList[i].onmouseout = function() {
                this.src = this.src.replace(/_over./i,"_off.");
                return false;
            }
        }
    }
    return true;
}

/* Preload */
function preLoadImg(f) {
    if(document.images) {
        var loadedImg = new Image();
        loadedImg.src = f;
    }
}

/* Onload */
function setOnLoad() {
    setRollOver();
}
window.onload = setOnLoad;