インフォメーション

ホーム > DHTML > インフォメーション

■説明

　リンクにカーソルが乗ると説明文が表示されます。IE4から動作します。N4からも動作します。一応クロスブラウザー(IE/Nに対応しているという意味)となっています。DHTMLの機能です。動的なページを作ることが出来ます。

■ソース

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>インフォメーション</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
//――――――――――――――――――――――――――――――――――――――
// 作成者:るび～  ACCESS R  http://www5e.biglobe.ne.jp/~access_r/
//――――――――――――――――――――――――――――――――――――――

//――――――――――――――――――――――――――――――――――――――
// ユーザが設定する部分はここから！！
//――――――――――――――――――――――――――――――――――――――
	//マウスが乗った際に出力するメッセージ
var message = new Array();
message[0] = "トップページになります。みんなリンクフリーなので、是非リンクして下さい";
message[1] = "掲示板になります。質問などがあったら書き込んで下さいね。";
//――――――――――――――――――――――――――――――――――――――
// ユーザが設定する部分はここまで！！
//――――――――――――――――――――――――――――――――――――――
function InfoOn(number){
	if(document.all){
		document.all("info").innerHTML = message[number];
	}else if(document.layers){
		document.layers["info"].document.open();
		document.layers["info"].document.write(message[number]);
		document.layers["info"].document.close();
	}else if(document.getElementById){
		document.getElementById("info").innerHTML = message[number];
	}
}
function InfoOff(){
	if(document.all){
		document.all("info").innerHTML = "　";
	}else if(document.layers){
		document.layers["info"].document.open();
		document.layers["info"].document.write("　");
		document.layers["info"].document.close();
	}else if(document.getElementById){
		document.getElementById("info").innerHTML = "　";
	}
}
	//画面に出力される部分となります。
if(document.all || document.layers || document.getElementById){
	document.write('<DIV ID="info"><LAYER NAME="info">　</LAYER></DIV>');
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<A HREF="http://www5e.biglobe.ne.jp/~access_r/"
onmouseover="InfoOn(0);" onmouseout="InfoOff();">
ACCESS R
</A><BR>

</BODY>
</HTML>

■ソースの説明

ユーザが設定する部分はコメントに記述してある部分をよく読んで設定してください。
JavaScriptを外部ファイルも設置出来るようにしました。ここからダウンロード（dhtml_113.js）して下さい。画面出力したい箇所に以下のように記述して下さい。設定を変える際には、ダウンロードしたdhtml_113.jsファイルを直接修正して下さい。
イベントハンドラの「onmouseover」（マウスが乗ったイベントを通知）で呼び出されるInfoOn関数の引数に指定する数字は、ユーザが設定したmessage配列の添え字の番号となります。引数の数字を0とした場合は、message[0]に指定したメッセージが画面に出力されます。
イベントハンドラの「onmouseout」（マウスが外れたイベントを通知）で呼び出されるInfoOff関数は呼び出されると画面に出力されたメッセージが未表示となります。
使用しているものは、「document.all」と「document.layers」と「document.getElementById」の3つ使用することによって両ブラウザに対応しています。
「document.all("info").innerHTML」と「document.layers["info"].document.write」と「document.getElementById("info").innerHTML」で画面に出力しています。

■実行例

実行例

■対応ブラウザ

インフォメーション
IE3	IE4	IE5	IE5.5	IE6	N3	N4	N6	N7	O6
×	●	●	●	●	×	●	●	●	×

[ホーム] [DHTML] [↑ページ最上部へ戻る]

Webマスター、HP作成のプロとして活躍したい方は見てください。
ホームページの開設数が増加し、Web業界や一般企業でWebマスターが急激に求められています。Webマスターの絶対数の不足している今が、技能習得の絶好のチャンスです。