• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:メニューボタン)

メニューボタンでホームページ作成初心者の質問

このQ&Aのポイント
  • ホームページ作成初心者がメニューボタンについて質問。
  • テーブルで横にボタン画像を並べ、スタイルシートで指定しています。
  • リンクまたはボタン画像にマウスポインタを乗せると画像が入れ替わることはできるか。

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.1

現状の仕様のまま、”td”の背景画像をマウスオーバーで入れ替えたいのであれば、:hoverという擬似クラスが実装されている、”IE6以外の”主要モダン・ブラウザ(IEも7以降ならOK)でなら可能です。 「入れ替わる」画像を仮にmenu01_over.gifとすると、CSSに以下の指定を付け足すだけです。 .td1:hover { background-image:url(menu01_over.gif); } IE6を対象に含めるのであれば、IE6では擬似クラスはa要素にしか効きませんので、現在td要素に適用している.td1というclassを、a要素に(ブロック化した上で)適用する形に変更すれば、a:hoverにも上記と同様の指定をする事でに可能になります。

menta2000
質問者

お礼

ご回答ありがとうございます。 IE7から色々と変更されているのですね。 古い本を見ながら作成しておりましたのでよくわかってませんでした。 大変参考になりました。 ありがとうございます。

すると、全ての回答が全文表示されます。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

IE6まで考えるなら最初からアンカータグの背景にしてしまえばよいのでは? (メニューにテーブルを使うことの良し悪しはありますが・・・) <style> .td1{ padding:0px; border:0px solid #0000FF; background-color:#FFFFFF; } .td1 a{ text-align:center; text-decoration:none; background-image:url(menu01.jpg); display:block; width:90px; height:25px; line-height:25px; font-size:12px; } .td1 a:hover{ background-image:url(menu02.jpg); } </style> <table> <tr> <td class="td1"><a href="">トップページ</a></td> <td class="td1"><a href="">次のページ</a></td> <td class="td1"><a href="">その次のページ</a></td> </tr> </table>

menta2000
質問者

お礼

ご回答ありがとうございます。 大変参考になりました。 ありがとうございました。

すると、全ての回答が全文表示されます。

関連するQ&A