• ベストアンサー
  • すぐに回答を!

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

  • 質問No.5622418
  • 閲覧数31
  • ありがとう数4
  • 回答数3

お礼率 76% (467/614)

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

画像が二枚あり一枚は通常時に表示されるようにしたと考えております。参考までにその画像は以下になります。よろしければ見てみてください。なお一枚目の画像ファイルは
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
  • ベストアンサー

ベストアンサー率 51% (153/295)

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

http://css-happylife.com/log/javascript/000157.shtml
お礼コメント
pcckit

お礼率 76% (467/614)

この度は、ご指導を頂きまして真にありがとう御座います。
とても参考になりました。
ありがとう御座いました。
投稿日時:2010/01/27 07:16

その他の回答 (全2件)

  • 回答No.2

ベストアンサー率 51% (3827/7415)

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

お礼率 76% (467/614)

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

ベストアンサー率 61% (1594/2576)

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

ロールオーバーの仕組みをもう一度確認してみては?
http://hac-design.com/css/rollover.html
補足コメント
pcckit

お礼率 76% (467/614)

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

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ