リンク先の紹介( テキストボックス編 )

Index

  リンクにマウスカーソルが触れると、テキストボックスにリンク先の内容紹介を表
 示するサンプルです。またカーソルがリンク上から外れるとテキストボックスはクリ
 アされます。

【例】

  <SCRIPT TYPE="text/JavaScript">
  <!--
  function intro( i )   // (1)
  {
    var msg;
    switch( i ) {    // i によりメッセージを選択
    case 0: msg = "最新情報のページです。"; break;
    case 1: msg = "作者の自己紹介のページです。"; break;
    case 2: msg = "リンク集のページです。"; break;
    default:msg = ""; break;
    }
    document.MSG.val.value = msg; // (2)
  }
  //-->
  </SCRIPT>

  <A HREF="wnew.html" onMouseOver="intro(0);" onMouseOut="intro(3);">
  What's NEW</A><BR>  // (3)
  <A HREF="prof.html" onMouseOver="intro(1);" onMouseOut="intro(3);">
  Profile</A><BR>
  <A HREF="link.html" onMouseOver="intro(2);" onMouseOut="intro(3);">
  Links</A><BR>
  <FORM NAME="MSG">  // (4)
    <INPUT NAME="val" SIZE="50" MAXLENGTH="50">
  </FORM>

【解説】

 (1) リンクにマウスカーソルが触れたときに呼び出される関数。
 (2) "MSG" というフォーム内にある "val" というテキストボックスの value に
     msg を代入します。
 (3) リンクにマウスカーソルが触れると、onMouseOver というイベントが、また
     リンクから外れると onMouseOut イベントがそれぞれ発生し intro() を呼
     び出します。
 (4) フォームの設定
【実行してみよう】

1. What's NEW
2. Profile
3. Links