重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

カーソルが当たった箇所に吹き出しで表示

解決済

  • 質問者：haven3
  • 質問日時：
  • 回答数：2件

現在フォームを作成しています。

仕様として、テキストフィールドにカーソルがあたるごとに、その箇所に「吹き出し表示」で説明文を加えたいと考えています。できなければ、フォームにじか書きしてしまうしかないと思うのですが、もし同じようなコーディングをした経験がある方がいらっしゃいましたら、ご教示願えますでしょうか？よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： BLUEPIXY
  • 回答日時：

ツールチップ表示みたいなものを作ってみました。


マンガみたいな「吹き出し」の場合
サイズ固定の場合は、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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！！まさしく望んでいたものです。
onmouseoverを指定すれば良いのですね。
勉強になりました。

通報する
お礼日時：2006/07/22 14:25

No.1

  • 回答者： yambejp
  • 回答日時：

titleを指定してはいかがでしょうか？



<form>
テスト：<input type="text" title="テスト">
</form>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報