トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ ヘルプテキストの表示

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

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

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

◆ 実行サンプル


この文字にマウスを重ねると

この文字にマウスを重ねると

略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「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>



page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom