- ベストアンサー
ロールオーバーで画像が変わらない(スタイルシート)
ロールオーバーしたときに画像を変えたいんですが変わってくれません。 ソースは <html> <head> <meta http-equiv="Content-Type" content"text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body{background:#191A1C} img{border:none} a:haver{background-color:khaki;} #on1{background-image:url("img/top_on.jpg")} a:haver img{visibility:hidden} </style> </head> <body> <table width="800" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#" id="on1"><img src="img/top.jpg" width="80" height="35" border="0"></a></td> </table> </body></html> 関係なさそうなところは載せてないんですが以上です。 top.jpgをロールオーバー時にtop_on.jpgに変わるようにしたいんですがうまくいきません。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
それはJavaScriptの範疇ですか、ね。 スタイルシートで変更できるのは、背景だけだと思います。 もとの、top.jpgは背景ではなくページ上の画像なので、その方法では変更できません。 私が同じようなことをしたときには、 （スタイル定義部） .bg a{background-image:url(tile1.gif);} .bg a:hover{background-image:url(tile2.gif);} （HTML本体） <p class="bg"><a href="#">スタイルシートだけで</a></p> こんな風に記述しました。
その他の回答 (3)
- nuruhho44
- ベストアンサー率57% (38/66)
スタイルシートだけで画像のロールオーバーをやりたいということですね？ 残念ながら A:hover はアンカータグにしか効果がありません。アンカータグの背景を変えるようにしてください。 あらゆるブラウザで完璧に効果を出したいとお望みであるなら、諦めてJavaScriptでやられたほうがいいでしょう。
- shy00
- ベストアンサー率34% (2081/5977)
CSSでのロールオーバー（画像変更）については http://www.fromdfj.net/html/cssRollover.html が参考になるかと思います 再度、CSSの記述などを確認ください
こんばんは。 根本的な話ですが、一般的にロールオーバーにはJavaScriptを使用します。 どうしてもスタイルシートで実現したいですか？ だとしても、知る限りでは、背景色の変更までが限界だったと思いますがいかがでしょう？ 何か、サンプルでもあったのでしょうか。 念のために背景色変更の方法の解説ページを紹介しておきます。
