CSSで画像を動的に切り替えるには？

CSSによる画像切り替え（ロールオーバー）について調べてみました。

InternetExplorerやNetscapeで動作するものは完成しましたが、残念ながらOperaで動作するものは作成できませんでした。

また、本サイトの上部のメニューのように画像が並ばせる場合、縦に画像を並べるのはうまくいきましたが、横に並べるのはうまくいきませんでした。

最終的に、私のサイトの上部のメニューについて言えば、「CSSによる画像切り替えは使えない」という結論に達しました。（後日、解決→「#BLOG：CSSによる画像切替（ロールオーバー）に成功！」）

ですが、せっかく調べたので、参考資料として作ったHTMLを公開します。

CSSで画像を切り替える仕組みは、次のようになっています。

1.マウスを置くと表示する画像を、背景画像として設定する。この背景画像の設定にCSSを使う。（aタグの背景画像としてに設定する。ただし、aタグだけではどのaタグにどの画像を背景にすればよいか分からないので、id属性を使用して、背景画像に対応するaタグを特定する。）
2.背景画像の上に通常時に表示する画像を置く。（imgタグを使って画像を表示。）
3.マウスが乗ったときに、通常表示している画像を隠すようにCSSで設定する。画像が隠れると、背景が表に現れるので、あたかも画像を新たに表示されたように見える。実際には背景画像が見えるようになるだけ。

仕組みはソース コードを見てもらったら方が分かりやすいかもしれません。ソース コードはブラウザの［表示］－［ソース］で参照してください。

まずは横型の「CSS画像切り替え」のサンプル。
・サンプル ページ表示

これはWindowsのInternetExplorer 6.0では正常に表示できますが、OperaやNetscapeでは表示できません。

次は縦型の「CSS画像切り替え」のサンプル。
・サンプル ページ表示

これはWindowsのInternetExplorer、Netscapeで動作します。（古いバージョンでは動作しない可能性あり。）

CSS画像切り替えのより詳しい解説は次のサイトが役立ちます。
【参考】from DFJ index：CSSでロールオーバー