ロールオーバーしたときに画像を変えたいんですが変わってくれません。ソースは関係なさそうなところは載せてないんですが以上です。 top.jpgをロールオーバー時にtop_on.jpgに変わるようにしたいんですがうまくいきません。

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

解決済

質問者：sin11
質問日時：2004/01/12 23:28
回答数：4件

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

<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件)

No.1

回答者： noname#5549
回答日時：2004/01/12 23:45

こんばんは。

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

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

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

参考URL：http://allabout.co.jp/computer/hpcreate/closeup/ …

- 0
- 件

通報する

No.2ベストアンサー

回答者： selene_pl
回答日時：2004/01/12 23:47

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

こんな風に記述しました。