リンク先の内容紹介(ステータスバー編)

Index

このプログラムは,リンクにマウスカーソルが触れると,リンク先の内容をステータスバーに表示します.またカーソルがリンクから外れると,メッセージを消去します.

【例】

	<SCRIPT LANGUAGE="JavaScript">
	<!--
	function introduce( i ){	
		var msg;
		switch( i ){
			case 0:
				msg = "最新情報のページです.";
				break;
			case 1:
				msg = "作者の自己紹介のページです.";
				break;
			case 2:
				msg = "リンク集のページです.";
				break;
			default:
				msg = "";
		}
		window.self.status = msg;		//(1)
		return true;		//(2)
	}
	//-->
	</SCRIPT>
	<LI><A HREF="wnew.html" onMouseOver="return introduce(0)" onMouseOut="return introduce(-1)">
	What's NEW</A>
	<LI><A HREF="profile.html" onMouseOver="return introduce(1)" onMouseOut="return introduce(-1)">
	Profile</A>
	<LI><A HREF="links.html" onMouseOver="return introduce(2)" onMouseOut="return introduce(-1)">
	Links</A>

【解説】

(1)ここでステータスバーにmsgを表示します.
(2)リンクにマウスが触れることにより,onMouseOver,リンクからカーソルが外れることによりonMouseOutイベントハンドラがそれぞれ発生し,introduce()を呼び出します.またintrcuce()からtrueを返し,ONMOUSEOVER="return inotroduce()"としないと正常に動作しません.

【実行してみよう】

マウスカーソルがリンクに触れると,ステータスバーにメッセージが表示され,クリックするとリンク先へ進みます.リンクから外れるとメッセージは消去されます.

  • What's NEW

  • Profile

  • Links


    1998(C) Motonari Morikawa