実行例

function myIn( myTblNo ) {	// カーソルが乗った
document.getElementById( "info" ).innerHTML = myTbl[myTblNo];
myObj = document.getElementById( "info" ).style;
myObj.left = document.body.scrollLeft + myEvent.clientX + 20;	// X表示位置
myObj.top = document.body.scrollTop + myEvent.clientY + 20;	// Y表示位置
myObj.visibility = "visible";	// 表示
}
function myOut( ) {	// カーソルが離れた
document.getElementById( "info" ).style.visibility = "hidden";	// 非表示
}
// --></SCRIPT>

<DIV id="info" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</DIV>
<SCRIPT type="text/javascript"><!--
myTbl = new Array(
"はじめに JavaScriptとは、なんぞやという堅苦しい説明です。 最初に読んでもサッパリと思いますが、とりあえず目を通してください。 後になるとわかるようになります。 ",
"いきなりJavaScriptを使ってみましょう いきなりJavaScriptをつかって使用中のブラウザ名をホームページに表示します。 ここをマスターすれば後は楽勝です。 ",
"あいさつ文を表示してみましょう 時間によって違うメッセージを表示します。 ",
"現在の日付と時間を表示してみましょう 現在日時を取得して表示します。。 ",
"スクリプトを関数化してみましょう スクリプトを何回も処理させる場合は関数化するのが最適です "
);

// FireFox 対策
window.document.onmousemove = myGetEvent;
function myGetEvent( evt ){
  myEvent =  ( evt ) ? evt : window.event;
}

function myIn( myTblNo ) { // カーソルが乗った
 document.getElementById( "info" ).innerHTML = myTbl[myTblNo];
 myObj = document.getElementById( "info" ).style;
 myObj.left = document.body.scrollLeft + myEvent.clientX + 20; // X表示位置
 myObj.top = document.body.scrollTop + myEvent.clientY + 20; // Y表示位置
 myObj.visibility = "visible"; // 表示
}
function myOut( ) { // カーソルが離れた
 document.getElementById( "info" ).style.visibility = "hidden"; // 非表示
}
// --></SCRIPT>
<A href="hajimeni.htm" onmouseover="myIn( 0 )" onmouseout="myOut()">はじめに</A> 
<A href="step1.htm" onmouseover="myIn( 1 )" onmouseout="myOut()">Step.1</A> 
<A href="aisatu.htm" onmouseover="myIn( 2 )" onmouseout="myOut()">Step.2</A> 
<A href="getdate.htm" onmouseover="myIn( 3 )" onmouseout="myOut()">Step.3</A> 
<A href="function.htm" onmouseover="myIn( 4 )" onmouseout="myOut()">Step.4</A>

サンプルだけの HTMLはこちらへ

説明

リンクの上にマウスカーソルが来たら、リンクの説明をカーソルの隣に表示するようにしてみます。

リンクにカーソルが入ったら何かするのは、onmouseover、onmouseout イベントで処理していました。今回も同じです。

表示用の DIVタグを 1個用意して、

説明文章を myTbl にセットして、

myTbl = new Array(

"あいさつ文を表示してみましょう 時間によって違うメッセージを表示します。 ",

"現在の日付と時間を表示してみましょう 現在日時を取得して表示します。。 ",

"スクリプトを関数化してみましょう スクリプトを何回も処理させる場合は関数化するのが最適です "

);

リンクタグを設置して、

マウスが乗ったら、表示です。

function myIn( myTblNo ) {	// カーソルが乗った
document.getElementById( "info" ).innerHTML = myTbl[myTblNo];
myObj = document.getElementById( "info" ).style;
myObj.left = document.body.scrollLeft + myEvent.clientX + 20;	// X表示位置
myObj.top = document.body.scrollTop + myEvent.clientY + 20;	// Y表示位置
myObj.visibility = "visible";	// 表示
}

パラメータの myTblNo は表示したい説明の myTblの配列番号です。
document.body.scrollLeft、document.body.scrollTop は、Step.74 を参照してください。

window.event.clientX、window.event.clientY は、マウスカーソル位置です。
ただし、Firefox が、window.event を拾えないので、対策用として、

// FireFox 対策

window.document.onmousemove = myGetEvent;

function myGetEvent( evt ){

myEvent = ( evt ) ? evt : window.event;

}

のルーチンを追記しました。
これで、IE も FX も使えるイベントオブジェクト myEvent ができました。
X,Y それぞれ +20 して、表示位置をすこし、右下にずらしました。

マウスが離れたら、非表示です。

function myOut( ) {	// カーソルが離れた
document.getElementById( "info" ).style.visibility = "hidden";	// 非表示
}

参考ステップ
Step.39 「只今ホームページ読込中！」メッセージを表示してみましょう　※ style.visibility
Step.44 日付と時間をリアルタイムに表示してみましょう　※ innerHTML
Step.74 画面右下にリンクバナーを固定表示してみましょう　※ document.body.scrollLeft、document.body.scrollTop
Step.89 リンク先の補足説明窓を表示してみましょう　その２　

▲TOP

実行例

リスト

説明