CSSのhoverを使ってアイコン画像を変える

質問

度々お邪魔しております。
ホームページのアイコンで、カーソルを画像の上に持ってくると、別に用意した画像が出てくるようにしたいと思っています。

一応、HTMLでは以下のようにしているのですが、これをスタイルシートでやる場合はどのようにしたらいいのか分かりません。

<td><div align="center"><a href="index.html">
<img src="icon1.jpg" onmouseover="this.src='icon1_2.jpg';"
onmouseout="this.src='icon1.jpg';"border="0"></a></div></td>

しかし、調べてみても思い通りのソースが見つからなかったので、どなたか教えてください。

回答No.3

mizunoto_R · ベストアンサー

imgではなく別の方もおっしゃっているように背景画像で表現するようになる形になります。

cssとマウスオーバーあたりで検索するとたくさん出てきます。
書籍とかにも結構のっている部分だと思いますが...

普通にテキストでリンクを作り、テキスト自体をspanで見えなくする、または表示位置をマイナス値などをつけて視覚的に見えなくする方法があります。

質問事項ではないのですが、書かれているソースを見て～HTML記述からXHTMLで変わる部分として、<table>レイアウトではなくcssレイアウトをおすすめします。
<div>の属性でalign="はXHTMLでは非推奨なのでcssで記述した方がいいと思います。(text-align:center;)

参考URL：

http://www.openspc2.org/reibun/css/etc/007/index.html,http://www.stylesheet-stylebook.com/archives/000104.php

回答No.2

naokita

js の例はわからないけど、CSSだけで適応するなら アンカーに対応させなければIE6やIE7でもDTDによって hover が a 以外に効かなくなるはず。
とりあえず、思い浮かんだ方法なら
空アンカーに背景を表示するしかないかな？
普通、アンカーは空にしないんだけど・・・

<tr><td class="aaa"><a href="index.html"></a></td></tr>

.aaa{ taxt-align:centr;}
.aaa a{ display:block; width:100px; height:100px; background: #FFF url(icon1.jpg) no-repeat;}
.aaa a:hover{ background: #FFF url(icon1_2.jpg) no-repeat; }

a の幅 width:100px; height:100px; は、
icon1.jpgとicon1_2.jpgの大きい方の幅を指定。
-----------------------------------
別の方法は、icon1.jpgとicon1_2.jpgを画像一体化（画像を一つにして）させてa:hoverでポジションを変化させた方が良いかも。

回答No.1

noname#83877

javascriptのままの方が良いです。
cssでのマウスオーバーは現在、まだ使える状況にありません。