ベストアンサー

ロールオーバーで画像が変わらない(スタイルシート)

2004/01/12 23:28

ロールオーバーしたときに画像を変えたいんですが変わってくれません。ソースは <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に変わるようにしたいんですがうまくいきません。

sin11
お礼率53% (145/270)

HTML
回答数4
ありがとう数1

みんなの回答 （4）
専門家の回答

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

ベストアンサー

selene_pl
ベストアンサー率49% (102/207)

2004/01/12 23:47 回答No.2

それは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)

2004/01/12 23:58 回答No.4

スタイルシートだけで画像のロールオーバーをやりたいということですね？残念ながら A:hover はアンカータグにしか効果がありません。アンカータグの背景を変えるようにしてください。あらゆるブラウザで完璧に効果を出したいとお望みであるなら、諦めてJavaScriptでやられたほうがいいでしょう。

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

shy00
ベストアンサー率34% (2081/5977)

2004/01/12 23:50 回答No.3

CSSでのロールオーバー（画像変更）については http://www.fromdfj.net/html/cssRollover.html が参考になるかと思います再度、CSSの記述などを確認ください

参考URL：: http://www.fromdfj.net/html/cssRollover.html

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

noname#5549

2004/01/12 23:45 回答No.1

こんばんは。根本的な話ですが、一般的にロールオーバーにはJavaScriptを使用します。どうしてもスタイルシートで実現したいですか？だとしても、知る限りでは、背景色の変更までが限界だったと思いますがいかがでしょう？何か、サンプルでもあったのでしょうか。念のために背景色変更の方法の解説ページを紹介しておきます。