マウスオーバーでポップアップ画像を出したい

サーチして沢山のサイトを見たのですが、どーーーーーーーしてもわからないので質問させてください。

サイトにある画像Aにマウスオーバーすると画像Bというのがポップアップで表示されるようにしたいのです。

どうやらjavascriptの方法とCSSの方法があるような感じなのですが、どーーーーーーーしてもわからないのです。。。

具体的にJavascriptでこう書いて入れてhtmlでこう書くんだよ、

とか

CSSにこれを追加してhtmlにはこう書くんだよ


とわかりやすく教えていただけると助かります。


どうぞよろしくお願いいたします。

No.1 回答者： ORUKA1951 回答日時： 2012/09/04 19:46

現在javascriptよりはCSSのほうが主流でしょうから・・

　スタイルシートの、擬似要素:afterか:beforeに対して、contentプロパティで内容の追加をします。
　ただし、画像のような「内容のない要素」空要素には追加ができません。簡単に説明できる内容ではないので仕様書を上げておきます。

12. 生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
5.12.3 :before及び:after 疑似要素（The :before and :after pseudo-elements） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

　なお、こ仕様書はCSS2ですが、現在ウェブ標準のCSS2.1の良い邦訳を知りません。この部分は、すこし変更があってややこしいですが
※空要素には内容を追加できません(CSS2では説明されていなかった)
※改行させるにはwhite-spaceの設定が必要
　いくつかの値がなくなりました。

img:hover:after{}ではダメです。
<p class="figure"><img???
p.figure:hover:after{}でなければなりません。

この回答へのお礼

早速のご回答ありがとうございます。

私の力不足でせっかくのご説明が全て理解することが出来ず、申し訳なく思っております。

もうちょっと勉強してから再度トライしたいと思います。

本当にありがとうございました。

お礼日時：2012/09/05 12:14