- ベストアンサー
オンマウスで画像と説明文を表示する方法
画像ではなく文字のリンク先にオンマウスで画像と説明文を 表示したいと思っておりますが、タグが分からず困っておりますので教えていただければ光栄です。宜しくお願いいたします。
- zekusu
- お礼率64% (122/190)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <body> <img src="" id="a1"><hr> <div id="a2"></div><hr> <a href="#" onMouseOver="chg('img0.jpg','なんと、もうしましょうか')">aaaa</a> <a href="#" onMouseOver="chg('img1.jpg','あぁ～入院かぁ～')">bbbb</a> <a href="#" onMouseOver="chg('img2.jpg','気が重いなぁ～')">cccc</a> <script> function chg(i,m){ document.getElementById('a1').src=i; document.getElementById('a2').innerHTML=m; } </script> </body> </html>
その他の回答 (2)
- taaaaaaa
- ベストアンサー率38% (31/80)
CSSのみのツールチップを使っています。 動作も軽いし、設置も楽ですよ。
お礼
ありがとう御座います。 工夫で素人でも複雑なＨＰが作れることが分かりました。 いろいろ勉強させていただきます。今後も宜しくお願いします。
- steel_gray
- ベストアンサー率66% (1052/1578)
マウスの位置に説明(テキストでも画像でも)を表示するサンプル。 <html> <head> <title></title> <style type="text/css"> #description div{ position:absolute; border:dashed thin black; padding:0.1em 0.2em; background-color:white; } </style> <script type="text/javascript"> document.onmouseover=function(e){ if(! e) e=window.event; var s = e.srcElement||e.target; var m=document.getElementById('description').getElementsByTagName('div'); for(var i=0;m[i];i++){ if(s.nodeName=='A' && m[i].title == s.href){ m[i].style.display = ''; m[i].style.left = (e.clientX+5)+'px'; m[i].style.top = (e.clientY+5)+'px'; } else m[i].style.display = 'none'; } } </script> </head> <body> <p> 質問サイトの<a href="http://oshiete.goo.ne.jp/">教えてgoo</a> は<a href="http://okwave.jp/">OKWave</a> のプラットフォームを利用しています。 </p> <div id="description"> <div style="display:none" title="http://oshiete.goo.ne.jp/"> <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif"><br> <em>教えてgooの説明文</em> </div> <div style="display:none" title="http://okwave.jp/"> <img src="http://okwave.jp/images/logo_top.gif"><br> <em>OKWaveの説明文</em> </div> </body> </html>
お礼
ご丁寧な対応、誠にありがとう御座います。 今後とも何卒よろしくお願いいたします。
お礼
早々、ありがとう御座います。 勉強になりました。またよろしくお願いいたします。