いっしきまさひこBLOG

AI・機械学習関連、Web制作関連、プログラミング関連、旅行記録などなど。一色政彦。

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でロールオーバー