画像を二枚使ったロールオーバーについて質問をさせて頂きたいのでお願いし

質問

画像を二枚使ったロールオーバーについて質問をさせて頂きたいのでお願いします。

画像が二枚あり一枚は通常時に表示されるようにしたと考えております。参考までにその画像は以下になります。よろしければ見てみてください。なお一枚目の画像ファイルは
img/1.gifといいます。

http://desktop10.web.fc2.com/1.gif

次にマウスを重ねたときに表示されるようにしたい画像が以下になります。
なお二枚目の画像ファイルはimg/11.gifといいます。

http://desktop10.web.fc2.com/11.gif

そこで私は「html」の部分に以下の記述をしました。

<div id="waku1">
<div>
<a href="index.html/"><img src="img/1.gif" width="108" height="48" alt="*" /></a>
</div>
</div><!-- waku1 end -->

次に、「css」に以下の記述をしました。

#waku1 div{ width:109px;
background:url(img/1.gif);
height:48px;
float:left;
border: solid 1px #d3d3d3;
}

#waku1 a{
display:block; width:100%; height:100%; text-decoration:none;
}

#waku1 a:hover{
background:url(img/11.gif);
}

上記のようにしてブラウザ上で確認をしたところ、780pxの枠の中に隙間無くぴったりと収まったのですが
該当の画像にマウスポインタを合わせたところ、11.gifの画像に変わってくれません。ただ少し気になった点は、マウスポインタをあわせたときに画像の隙間から赤い線がわずかに見えました。・・
ですが、11.gifのように画像にしっかりと表示できません。私には全くわからないのですが、どなた様かご教示をいただけませんでしょうか？

どうかご指導のほどよろしくお願いいたします。

回答No.3

metametamu · ベストアンサー

今回のパターンはjavascriptでのロールオーバーをおすすめします。

http://css-happylife.com/log/javascript/000157.shtml

お礼

この度は、ご指導を頂きまして真にありがとう御座います。
とても参考になりました。
ありがとう御座いました。

回答No.2

yambejp

前景にimgをおけば背景になにをかいても意味ないですね。
前景を入れ替えるか、imgをつかわずに背景で両方処理する。
もしくは前景を隠してしまう・・・のどれかでしょうね

補足

yambejp様。ご連絡ありがとう御座います。私はまだまだhtmlについてもそうですがcssについてもまだまだまだまだまだ・・・ぜんぜん初心者でよく理解しておりません。今回適切な回答を頂きましたが、どのように記述したら良いのか良くわかっておりません。もしよろしければ記述方法等のご教示をいただけませんでしょうか？
大変お手数で御座います。ご教示のほどお願い申し上げます。

回答No.1

fujillin

ご提示の仕組みだと、hoverした時にバックグラウンド（背景）がかわるはず。
フォアグラウンドに<img>があるけれど、それはそのままなので背景が換わっても見えないだけでは？

ロールオーバーの仕組みをもう一度確認してみては？
http://hac-design.com/css/rollover.html

補足

ご連絡ありがとう御座います。yambejp様にさせて頂いた補足と同じになってしまいますが、私はまだまだhtmlについてもそうですがcssについてもまだまだまだまだまだ・・・ぜんぜん初心者でよく理解しておりません。今回適切な回答を頂きましたが、どのように記述したら良いのか良くわかっておりません。もしよろしければ記述方法等のご教示をいただけませんでしょうか？
大変お手数で御座います。ご教示のほどお願い申し上げます。