■ ヘルプテキストの表示

リンク文字にマウスを重ねるとヘルプテキストを表示します。
マウスが重なった位置を取得し、その近くにヘルプテキストを表示します。
ただし、Internet Explorer以外はヘルプテキストの位置を指導することができません。

ソフトやブラウザによってはヒントテキストやバルーンとも言います。

HTMLでも同様の事ができますが、JavaScriptの方がより様々な表現が可能です。

◆ 実行サンプル

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「hinttxt.js」というファイル名で保存します。
var x,y; if (navigator.appName.toLowerCase() == "netscape"){ window.onmousemove = get_mouse; window.captureEvents(Event.MOUSEMOVE); } function get_mouse(ev){ x = ev.pageX; y = ev.pageY; } function hinttxt(divnam,sts){ if (document.all){ //IEの場合 x = event.x; y = event.y; document.all[divnam].style.pixelLeft = document.body.scrollLeft+x; document.all[divnam].style.pixelTop = document.body.scrollTop+y; document.all[divnam].style.visibility = sts; } if (navigator.appName.toLowerCase() == "netscape"){ //NNの場合 document.getElementById(divnam).style.left = x; document.getElementById(divnam).style.top = y; document.getElementById(divnam).style.visibility = sts; } }

次に、HEAD句内にJavascriptの呼び出しを次のように記述します。
<script type="text/javascript" src="hinttxt.js"></script>

ヒントテキストを表示する文字列はこのサインプルでは次のように記述しています。 <h3><a href="/" onmouseover="hinttxt('hint1','visible')" onmouseout="hinttxt('hint1','hidden')">この文字にマウスを重ねると</a></h3>
<h3><a href="/" onmouseover="hinttxt('hint2','visible')" onmouseout="hinttxt('hint2','hidden')">この文字にマウスを重ねると</a></h3>

そのタグの前後にヒントテキストを記述します。
このサインプルでは次のように記述しています。
<div id="hint1" style="position:absolute; width: 200px; line-height: 1.0em; visibility:hidden; background:#FFFFD0;">クリックすると元のページに戻ります</div>
<div id="hint2" style="position:absolute; width: 200px; line-height: 1.0em; visibility:hidden; background:#FFD0FF;font-size:16pt">このように色の変更や文字の大きさも変更できます</div>