ロールオーバー（スワップイメージ）の実装 更新版。

今回は、完全オリジナルではなく、この記事を参考にさせてもらいました。。
ていうか、ほぼ、まんまです（笑）。。

function setRollOver(){
if(!document.getElementsByTagName) return false;
var ovrImgList = document.getElementsByTagName("img");
for(var i=0;i<ovrImgList.length;i++){
if(ovrImgList[i].className.match("ovr")){
ovrImgList[i].onmouseover = function(){
this.src = this.src.replace(/_off./i,"_on.");
return false;
}
ovrImgList[i].onmouseout = function(){
this.src = this.src.replace(/_on./i,"_off.");
return false;
}
}
}
}
window.onload = setRollOver;

いつも通り、簡単に説明しますと、
まず最初のif文でgetElementsByTagNameがサポートされているかを確認します。
（サポートされていないブラウザはここで終了。）

次にovrImgListに、そのページの全てのimgタグ（ノード）を格納します。
そしてfor文で、overImgListを全部最初から順番に確認して、
もしclassにovrが指定されていれば、
イベントハンドラ（ここではonmouseoverとonmouseout）に、
実行する関数（function）を設定してます。

で、肝心のimgを切り替える部分ですが、
その前に、ファイルの命名規則を以下のように定めるものとします。
通常時 → 〜_off.gif
オーバー時 → 〜_on.gif

上記の命名規則を踏まえて、処理を説明すると、
まず、オーバーした時のimgタグのsrc属性を見て、
_off.という文字列があれば、この部分を_on.に置換し、
src属性を置換したものと入れ替えるといった具合です。

これで、html内にいちいちイベントハンドラや、name,id属性を設定しなくても、
class="ovr"だけを書いてあげれば、ロールオーバーを簡単に実装出来ます。

ん〜、満足満足。