- 締切済み
オンマウスで説明文のレイヤーを表示
画像の上にカーソルが乗ると、レイアウトを崩さずに その画像の横にdivを表示する（上に重なるように）方法はありませんか？ ※マウスの座標からではなく、その画像のからの位置を指定。
- rondonpari
- お礼率20% (2/10)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- steel_gray
- ベストアンサー率66% (1052/1578)
サンプルです。 配置関係はCSSで。javascriptでは表示/非表示の制御だけをしています。 <html> <head> <title></title> <style type="text/css"> #BOX1{ float:left; margin:10em; position:relative; background-color:#ccc; } #BOX2{ position:absolute; top:-0.8em; left:90px; width:3em; background-color:#f00; color:#fff; */ </style> <script type="text/javascript"> </script> </head> <body> <div id="BOX1"> <img src="～" width="100" height="100" alt="XXX" onmouseover="document.getElementById('BOX2').style.display='block'" onmouseout="document.getElementById('BOX2').style.display='none'" > <div id="BOX2" style="display:none;"> 説明文 </div> </div> </body> </html>
- steel_gray
- ベストアンサー率66% (1052/1578)
#2です。 考え方ですので。 配置したい位置にtopやleftを指定すればいいのでは？（マイナス値にしたり、重なる/ハミでるような数値にしたり） それともBOX1の上右端や下右端を基点にしたいのでしょうか？ でしたら、 http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/measure/measuring.asp こちらを参考にボックスの大きさを得て算出する事になると思います。
補足
「javascriptで特定のdiv要素から基点を決めて、javascriptのオンマウスでdivを重ねて表示する方法」を教えてくださいｗ CSSは大体わかります。
- steel_gray
- ベストアンサー率66% (1052/1578)
＞divのidを基点に位置を指定したい absoluteの基点はstaticでない親ブロックになります。 なので基点にしたいブロックに position:relative; を付けるのが常套手段ですね。 例） <div id="BOX1" style="position:relative;"> <div id="BOX2" style="position:absolute;top:5px;left:5px;"> </div> </div> BOX2はBOX1の上左端から5pxの位置に配置される。
補足
外側かもしくは重なるようにしたのですが。それではただ入れ子にしているだけでは？
- benelli
- ベストアンサー率51% (78/152)
DIVの配置を絶対指定にして表示非表示するだけでできます。 <div style="position:absolute; top:256px; left:128px;"> javascriptというよりCSSの領分です。
補足
早速のご回答ありがとうございます。 DIVの配置を絶対指定にするとウィンドウを広げた時にfloatしているのでレイアウトが崩れてしまいます。 javascriptでオンマウス時にそのdivのidを基点に位置を指定したいのですがよい方法はありませんか？
補足
ありがとうございます。大変参考になりました。 これにoffsetで指定すると思ったとおりにいきました。 #BOX1 #BOX2 をクラスにすれば複数つかえるのでさらに便利になるのですが・・