Home > イヌでもわかるJavaScript講座お品書き

イヌでもわかるJavaScript講座

Step.89 - リンクの補足説明窓を表示

リンクの上にマウスカーソルを持っていくと補足説明を表示するようにします。
ただし、マウスカーソルが離れても、表示は消えません。

Step テーマ
● とくになし

実行例

はじめに
Step.1
Step.2
Step.3
Step.4

リスト

<SCRIPT type="text/javascript"><!--

myTbl = new Array(

"はじめに<BR>JavaScriptとは、なんぞやという堅苦しい説明です。<BR>最初に読んでもサッパリと思いますが、とりあえず目を通してください。<BR>後になるとわかるようになります。<BR>",

"いきなりJavaScriptを使ってみましょう<BR>いきなりJavaScriptをつかって使用中のブラウザ名をホームページに表示します。<BR>ここをマスターすれば後は楽勝です。<BR>",

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

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

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

);

function myIn( myTblNo ) {	// カーソルが乗った
document.getElementById( "info" ).innerHTML = myTbl[myTblNo];
}
// --></SCRIPT>

<A href="hajimeni.htm" onmouseover="myIn( 0 )">はじめに</A><BR>

<A href="step1.htm" onmouseover="myIn( 1 )">Step.1</A><BR>

<A href="aisatu.htm" onmouseover="myIn( 2 )">Step.2</A><BR>

<A href="getdate.htm" onmouseover="myIn( 3 )">Step.3</A><BR>

<A href="function.htm" onmouseover="myIn( 4 )">Step.4</A><BR>

<BR>

<DIV id="info" style="width:600px; height:100px; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;"></DIV>

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

説明

[Q] Step.88 で、カーソルが離れても、表示は消えないようにできませんか？
[A] myOut を消しました。

おそらく、表示場所をカーソル位置じゃなくて、どこか固定場所にでも表示するように応用しようとしているのでしょうね。

ということで、今回のサンプルは、リンクにマウスカーソルが来れば、固定の補足説明窓に説明を表示させてみます。

とくに、Step.88 から、消すだけ消して、追加したものはありません。
詳しくは、Step.88 を参照してください。

参考ステップ
Step.88 リンク先の補足説明窓を表示してみましょう　