- ベストアンサー
カーソルが当たった箇所に吹き出しで表示
現在フォームを作成しています。 仕様として、テキストフィールドにカーソルがあたるごとに、その箇所に「吹き出し表示」で説明文を加えたいと考えています。できなければ、フォームにじか書きしてしまうしかないと思うのですが、もし同じようなコーディングをした経験がある方がいらっしゃいましたら、ご教示願えますでしょうか？よろしくお願いいたします。
- haven3
- お礼率45% (27/60)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ツールチップ表示みたいなものを作ってみました。 マンガみたいな「吹き出し」の場合 サイズ固定の場合は、backgroundImage で枠を表示してpadding で文字位置を調整で、 サイズを固定しない場合は、ＤＩＶの中に画像をＴＡＢＬＥで配置してそれらしくできるんじゃないかと思います。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>Pop Up Message</title> <style> <!-- --> </style> <script type="text/javascript"><!-- var oPopup; window.onload=function(){ oPopup = document.createElement("div"); oPopup.id = "PopUpMessage"; oPopup.style.display='none'; oPopup.style.color='black'; oPopup.style.backgroundColor='#FFFACD'; oPopup.style.position='absolute'; oPopup.style.border='1px solid black'; oPopup.style.padding='2px'; document.body.appendChild(oPopup); }; function popup(e, msg){ if(document.all){ e.pageX=document.body.scrollLeft+e.clientX; e.pageY=document.body.scrollTop+e.clientY; } if(msg!=null){ oPopup.innerHTML=msg; oPopup.style.left=(e.pageX + 10) + 'px'; oPopup.style.top=(e.pageY - 10) + 'px'; oPopup.style.display='block'; } else { oPopup.style.display='none'; } } //--> </script> </head> <body> <form name="FORM1"> <input name="name" type="text" onmouseover="popup(event, '名前を入力')" onmouseout="popup(event)"><br> <br> <input name="age" type="text" onmouseover="popup(event, '年齢を入力')" onmouseout="popup(event)"><br> </form> </body> </html>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
titleを指定してはいかがでしょうか？ <form> テスト：<input type="text" title="テスト"> </form>
お礼
ありがとうございます！！まさしく望んでいたものです。 onmouseoverを指定すれば良いのですね。 勉強になりました。