ここから質問投稿すると、最大10000ポイント当たる!!!! >>

ロールオーバーしたときに画像を変えたいんですが変わってくれません。
ソースは

<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に変わるようにしたいんですがうまくいきません。

このQ&Aに関連する最新のQ&A

A 回答 (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>

こんな風に記述しました。
    • good
    • 0

スタイルシートだけで画像のロールオーバーをやりたいということですね?



残念ながら A:hover はアンカータグにしか効果がありません。アンカータグの背景を変えるようにしてください。

あらゆるブラウザで完璧に効果を出したいとお望みであるなら、諦めてJavaScriptでやられたほうがいいでしょう。
    • good
    • 0

CSSでのロールオーバー(画像変更)については


http://www.fromdfj.net/html/cssRollover.html
が参考になるかと思います
再度、CSSの記述などを確認ください

参考URL:http://www.fromdfj.net/html/cssRollover.html
    • good
    • 0

こんばんは。



根本的な話ですが、一般的にロールオーバーにはJavaScriptを使用します。

どうしてもスタイルシートで実現したいですか?
だとしても、知る限りでは、背景色の変更までが限界だったと思いますがいかがでしょう?
何か、サンプルでもあったのでしょうか。

念のために背景色変更の方法の解説ページを紹介しておきます。

参考URL:http://allabout.co.jp/computer/hpcreate/closeup/ …
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング