ロールオーバー処理「オレならこうする版2007」（ファイル名とタグの組み合わせで自動的に設定する）

PC

ロールオーバーサンプル

_rollout → _rollover

マウスカーソルが画像の上に重なったとき、その画像がリンクになっており、その画像ファイル名の最後が _rollout となっている場合、その _rollout を _rollover に書き換えることで画像を差し替える JavaScript です。

サンプルのロールオーバー用の画像は次のようなファイル名になっています。

menu01_rollout.png 最初のメニューの標準画像
menu01_rollover.png 最初のメニューのロールオーバー画像
menu02_rollout.png 2番目のメニューの標準画像
menu02_rollover.png 2番目のメニューのロールオーバー画像
menu03_rollout.png 3番目のメニューの標準画像
menu03_rollover.png 3番目のメニューのロールオーバー画像

ロールオーバーのためのidやclassの設定は不要。上記のように画像を用意して JavaScript を読み込むだけです。（サンプルで使っている id はCSSの方で利用してます）また、ファイルの拡張子は、標準画像とロールオーバーで同じなら何でもオッケーです。
img タグの親が a タグという条件と、ファイル名 _rollout の条件があるため、意図せず暴発することは無いでしょう。むしろロールオーバー処理のために id/class を設定する必要が無いのがメリットだと思います。デメリットはリンク以外でロールオーバーしたい場合には使えないということでしょうか。

サンプルの JavaScript コード - rollover.js

new function(){
    function setRollOver(){
        var imgs = document.images;
        if(!imgs){return;}
        var preload = [];
        for(var i=0;i<imgs.length;i++){
            var splitname = imgs[i].src.split('_rollout.');
            if((splitname[1])&&(imgs[i].parentNode.tagName=='A')){
                //ファイル名を保存
                imgs[i].src_rollout = imgs[i].src;
                imgs[i].src_rollover = splitname[0]+'_rollover.'+splitname[1];

                //ロールオーバー・アウト処理それぞれを設定
                addEvent(imgs[i],'mouseover',function(){this.src = this.src_rollover;});
                addEvent(imgs[i],'mouseout',function(){this.src = this.src_rollout;});

                //プリロード
                var l = preload.length;
                preload[l] = new Image();
                preload[l].src = imgs[i].src_rollover;
            }
        }
    }

    // イベントを追加する関数

    function addEvent(eventTarget, eventName, func){
        if(eventTarget.addEventListener){
            // モダンブラウザ
            eventTarget.addEventListener(eventName, func, false);
        }else if(window.attachEvent){
            // IE
            eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
        }
    }

    // setRollOver()をドキュメント読み込み完了時に実行する
    addEvent(window,'load',setRollOver);

}
ダウンロード
rollover.js
サンプルで使用している画像
一覧

参考

このシンプルさは美しいです。ちょっと影響を受けました。

関連エントリー