リンクが張られている画像の上にマウスカーソルを置いたり、外したりしたときに、画像の入れ替え（ロールオーバー）を行うスクリプトは、ホームページの制作においてよく使われているもののひとつです。最近のホームページ作成ツールでは、このスクリプトを簡単に使えるようですが、いちいち指定するのも結構面倒ですし、ソースを眺めると同じようなコードが数多く挿入されていて、なんだかすっきりしない感じです。そこで、もう少しクールな方法を考えてみました。なお、使用する画像のファイル名は、元の画像が xxx.gif であれば、onMouseOver で入れ替える画像に xxx-over.gif という名前を付けるという規則があるものとします。

■ 従来の方法

各画像の name（あるいは、id）属性にそれぞれ異なった値（名前）を指定しなければならない。 各画像を含む A タグに、onMouseOver, onMouseOut を追加しなければならない。しかも、function の引数に入れ替えを行う画像の name（あるいは id）属性の値を指定しなければならない。 古いブラウザでも動作しやすい。

■ 新しい方法

入れ替えを行いたい画像の class 属性に同じ値 ROLLOVER を指定する（同じ値なので、ホームページ作成ツール上では画像を複数選択して、一気に指定できる可能性がある）。 DOM をサポートしていない古いブラウザでは動作しない。

■ ソース