Help Layer
example
Dynamic HTML とはページをダイナミック(動的)に表現する最新のテクニックです。 基本的に HTML と JavaScriptVBScript を組み合わせてドキュメントを構成します。 現時点では Netscape Navigator4.0xMicrosoft InternetExplorer4.0x が DynamicHTML に対応しています。 しかも、それぞれのブラウザで互換性がほとんどないので WebPage で使用するときは 注意 が必要です。
source code
・HEAD部の記述
   1  <SCRIPT LANGUAGE="JavaScript">
   2  <!--
   3    var msg = new Array();
   4    msg[0] = '( ヘルプ メッセージ )';
   5    msg[1] = '( ヘルプ メッセージ )';
   6    msg[2] = '( ヘルプ メッセージ )';
   7 8 910    function help(x,y,color,msg){
  11      Obj=document.layers["name"];
  12      if ( x < outerWidth/2 ) { Obj.moveTo(x,y+20); }
  13      else { Obj.moveTo(x-300,y+20); }
  14      Obj.bgColor=color;
  15      Obj.document.write(msg);
  16      Obj.document.close();
  17      Obj.visibility="show";
  18    }
  19    function hide(){ 
  20      document.layers["name"].visibility="hide";
  21    }
  22  // -->
  23  </SCRIPT>

・BODY部の記述
  24  <LAYER NAME="name" VISIBILITY="hide"></LAYER>
  25  テキスト
  26  <A HREF="javascript:void(0)"
  27      onMouseover="help(event.pageX,event.pageY,'lemonchiffon',msg[0])"
  28      onMouseout="hide()">ヘルプリンク1</A>
  29  テキスト
  30  <A HREF="javascript:void(0)"
  31      onMouseover="help(event.pageX,event.pageY,'lemonchiffon',msg[1])"
  32      onMouseout="hide()">ヘルプリンク2</A>
  33  テキスト
  34  <A HREF="javascript:void(0)"
  35      onMouseover="help(event.pageX,event.pageY,'lemonchiffon',msg[2])"
  36      onMouseout="hide()">ヘルプリンク3</A>
  373839
source point
DynamicHTML Library の TopPage で使っている、リンク(このサンプルではピンク色の文字) の上にマウスを載せるとヘルプが出現するスクリプトだ。

まずは HEAD 部の説明から...
3 行目で配列の宣言をし、4 〜 9 行で配列の要素(文字列)を指定している。
10 〜 18 行でヘルプレイヤを表示させる関数 help() を設定している。
その内容は、11 行目でヘルプレイヤメソッドを変数 Obj に 入れている。これは本スクリプトでヘルプレイヤメソッドが何度も登場するためである。
12,13 行目ではヘルプレイヤの出現位置(moveTo(*,*))を調整するもので、その位置はマウス ポインタからの相対位置で指定している。そのの位置は help() の括弧内の引数 x , y が適用される。
14 行目ではヘルプレイヤの背景色を指定している。背景色は help() の括弧内の引数 color がそれになる
15 行目ではヘルプメッセージを出力している。メッセージは help() の括弧内の msg を引数として、4 〜 9 行で指定した配列要素が入る。
16 行目ではヘルプメッセージを閉じている。ここで close しておかないと、 配列要素が加算されるので注意が必要だ。
17 行目では hide(非表示)状態だったヘルプレイヤを show(表示)状態にしている。
19 〜 21 行でヘルプレイヤを非表示にさせる関数 hide() を設定している。
20 行目がそのステートメントだ。これについては説明するまでもなく、単純に ヘルプレイヤを hide(非表示)にしているだけである。

次に BODY 部の説明をしよう。
24 行目でヘルプレイヤを設定している。初期状態においてヘルプレイヤを表示しては 困るので、hide(非表示)にしている。通常、<LAYER> 〜 </LAYER> の 間に何かの文字を入れるが、今回はレイヤの出力を JavaScript で制御しているので レイヤを設定するだけでよいのだ。
26 〜 28 行、30 〜 32 行、34 〜 36 行の内容はほとんど同じなので、26 〜28 行の 説明だけを行うこととする。
26 行目の javascript:void(0) は、これまで何度も 紹介したように、リンクを無効にするものである。
27 行目がヘルプレイヤに引数を渡すステートメントで、今回はリンクにマウスを載せる ことで関数 help() を呼び出すようにしている。それでは help() の括弧内を説明する。
event.pageX : ページ内におけるマウスの横方向の位置を検出 event.pageY : ページ内におけるマウスの縦方向の位置を検出 lemonchiffon : ヘルプレイヤの背景色。RGB または カラー名で指定する。 msg[x] : ヘルプメッセージの配列番号。つまり 4 〜 9 行のメッセージのこと。 28 行目では、マウスがリンクから外れるとヘルプレイヤを非表示にする関数 hide() を呼び出している。

これでヘルプレイヤを出現させるスクリプトは完成だ!