CSSを使わないロールオーバー

最近はロールオーバーをCSSでやるのが主流のようですが、個人的には以下の理由からあまり好きではありません。

1. HTMLは綺麗だがCSSが若干複雑になる
2. テキストを見えなくしたり、マイナスインデントで画面外に飛ばすのが好みでない
3. 環境によってはCSSで画像が切り替わる際に一瞬だけカーソルが砂時計になる(ちらつく)

1.に関しては、テキストリンクや画像のリンクであっても高さや幅が固定されている場合はそんなに複雑でもないのですが、画像の大きさが違う場合や、現在のページのみ画像を変えるといった場合にIDやclass等の指定が若干複雑になります。

2.に関してはスパム行為になるのかならないのか判断に困るところですが、閲覧者をだますのが目的ではありませんので、ペナルティにはおそらくならないと思います。
しかし、なんとなく気持ちのいいものではありませんので、私はあまり好きではありません。
CSSの記述によっては音声ブラウザで読み上げない場合もありますし。

3.に関しては完全に好みの問題なのですが、私が所有する一番古いノートパソコンではCSSが切り替わる際に一瞬砂時計が見えます。
おそらくマウスオーバーで切り替える際に画像を読みに行くのが原因だと思いますので、CSSの記述というかロールオーバーのさせ方を変えることで対処できそうなのですが、同じように切り替えの際に画像を読む動作をするJavaScriptでは砂時計は発生しません。
処理的にはJavaScriptよりCSSの方が軽そうなのですが。

以上のような理由から私はロールオーバーにはJavaScriptを利用しています。
JavaScriptを切っている方もいると思いますが、ロールオーバーが見えないぐらいならさして問題ないでしょうし、CSSだって切っている人もいればユーザースタイルシート使ってる人もいると思うので。

ただ、Dreamweaverのロールオーバーは色々な環境での再現性を考えてかソースが若干長く複雑な上に、リンク部分にJavaScriptを呼び出すタグが必要になってきますので、HTMLソースも若干複雑になります。

そこで今回はもっと手軽なJavaScriptによるロールオーバーを実現する方法を紹介します。