昔から良く使われている、
ロールオーバーイメージ（人によってはスワップイメージとも）。
今でも良く見かけ、ボタン等の動作に使われる、定番の処理です。

Dreamweaver等のオーサリングツールでは、
この処理のソースを自動的に記述してくれるので、
処理の仕組みを理解していない人は意外と多いかも。

今回はこのロールオーバーイメージを、簡潔かつ、きれいに書いてみます。

通常書く場合は、こんな感じになります。

<a href="#" onmouseover="オーバー時の関数" onmouseout="アウト時の関数">
<img src="#" alt="" width="#" height="#" name="bt" id="bt"></a>

もしくは、

<a href="#" onmouseover="オーバー時の関数" onmouseout="アウト時の関数"
onfocus="フォーカス時の関数" onblur="ブラー時の関数">
<img src="#" alt="" width="#" height="#" name="bt" id="bt"></a>

いずれにしても、aタグには複数のイベントハンドラを書く必要があり、
どうしても長くなってしまいます。。

では、これを全て取っ払って、以下のようにしてみましょう。

<a href="#"><img src="#" alt="" width="#" height="#" id="bt"></a>

HTMLソースが、かなりシンプルになり、分かり易いですよね。

さて、取り除いたイベントハンドラはどうすれば良いか？
簡単です。
JavaScriptファイル内で設定してあげましょう。

function rollOver(){
//ロールオーバーの処理を記述
}
function setEvent(){
var obj = document.getElementById('bt').parentNode;
obj.onfocus = obj.onmouseover = obj.onblur = obj.onmouseout = rollOver;
}
window.onload = setEvent;

上記のJavascriptを簡単に説明してみます。
まず、最後の行のwindow.onloadにより、
ページ読み込み時にsetEvent関数が実行されます。
そして変数objに、以前までイベントハンドラを記述していたaタグへの
参照先が格納されます。
（id属性が 'bt' の parentNode（親ノード）つまり、ここではaタグ）

次にそのaタグにイベントハンドラを設定します。
これは単純に obj.イベントハンドラ という記述で出来ます。
さらに、そのイベント時に実行する関数を =（イコール）で結んであげます。

setEvent関数の2行目は、以下の記述を1行にまとめたものです。

obj.onfocus = rollOver;
obj.onmouseover = rollOver;
obj.onblur = rollOver;
obj.onmouseout = rollOver;

上記の例では、ロールオーバー時の関数を1つにしているので、
rollOver関数にちょっとした工夫が必要かもしれませんが、
もし分からないようであれば、オーバーとアウトで、
別々の関数を実行すれば良いだけです。

obj.onfocus = rollOver;
obj.onmouseover = rollOver;
obj.onblur = rollOut;
obj.onmouseout = rollOut;

これで、かなりHTMLがきれいになります。

■サンプル rollOver.html

更新版がありますのでどうぞ。
『ロールオーバー（スワップイメージ）の実装 更新版。』