シンプルなロールオーバーの仕方

CSSのみでロールオーバーするやりかたはよくみかけますが、ちょっと高度な一面も…。
そこでJavaScriptでやるロールオーバーの方法（しかも簡単!）がありますのでご紹介します。

////////////////////////////////////////////////////////////////////////
# function smartRollover() {
# if(document.getElementsByTagName) {
# var images = document.getElementsByTagName("img");
# for(var i=0; i < images.length; i++) {
# if(images[i].getAttribute("src").match("_off."))
# {
# images[i].onmouseover = function() {
# this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
# }
# images[i].onmouseout = function() {
# this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
# }
# }
# }
# }
# }
# if(window.addEventListener) {
# window.addEventListener("load", smartRollover, false);
# }
# else if(window.attachEvent) {
# window.attachEvent("onload", smartRollover);
////////////////////////////////////////////////////////////////////////

上記ソースを◯◯.jsとして保存。そして、外部ファイルとして読み込ませます。
↓
////////////////////////////////////////////////////////////////////////
#<script type="text/javascript" src="◯◯.js"></script>
////////////////////////////////////////////////////////////////////////

★画像を用意します。
通常時の画像と、ロールオーバー時の画像を別々で用意して、ファイル名の最後に「_on」「_off」とつけます。
１）●●_on.gif
２）●●_off.gif

↓
例）<a href="/"><img src="./●●_off.gif" alt="●●●" /></a>

どうでしょう？？できましたか？
複雑なコードが多いですが、これはシンプルで使いやすいです。
是非参考にしてみて下さい。

※使用に関しては自己責任でお願いします。