リンク先の内容紹介(テキストボックス編）

Index

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

【例】

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

	<FORM NAME="TextMSG">	//(3)
	<INPUT NAME="val" SIZE=50 MAXLENGTH=50>　
	</FORM>
	<A HREF="wnew.html" ONMOUSEOVER="introduce(0)" onMouseOut="introduce(-1)">
	What's NEW</A><P>		//(4)
	<A HREF="profile.html" ONMOUSEOVER="introduce(1)" onMouseOut="introduce(-1)">
	Profile</A><P>
	<A HREF="links.html" ONMOUSEOVER="introduce(2)" onMouseOut="introduce(-1)">
	Links</A><P>

【解説】

(1)リンクにマウスカーソルが触れたときに呼び出される関数．
(2)"TextMSG"というフォーム内にある"val"というテキストボックスのvalueにmsgを代入します．
(3)フォームの設定
(4)lリンクにマウスカーソルが触れると，onMouseOverというイベントハンドラが，またリンクから外れるとonMouseOutイベントハンドラがそれぞれ発生しintroduce()を呼び出します．

【実行してみよう】

  • What's NEW

  • Profile

  • Links

    1998(C) Motonari Morikawa