WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte) 		�Z�u���l�b�g�V���b�s���O�i���Z�u���A���h���C�j
[ JavaScriptの目次 ]
▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

[ 他の一覧 ]
◆↑ホームへ

 

■ JavaScript - サンプル集(257種類) - DHTML
　　 - ポイントすると、リンク先のヘルプを表示

リンク先をポイントすると、その横に説明文を表示させるスクリプトです。

ただしDHTML対応ブラウザでしか再現されません。
IEならば4.01以上、NNならば4.0以上が必要です。

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る




[ ソース ] 

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	moji=new Array();

	//ヘルプに表示する文字列を指定する
	moji[0]="JavaScriptのトップページです。<br>基礎講座とサンプル集があります。";
	moji[1]="フォームのサンプル集です。";
	moji[2]="リンクのサンプル集です<br>";
	moji[3]="リンクページです。<br>";

	//ヘルプを表示する欄の背景色を指定する
	bg_color="#f4d0ab";

	//ヘルプを表示する欄の横幅を指定する
	tabel_width=300;

	//ヘルプをマウスポインタからどの程度離すのか、横の距離を指定する
	x_purasu=40;
	//ヘルプをマウスポインタからどの程度離すのか、縦の距離を指定する
	y_purasu=0;


	function hyouji(doko,event){
		kazari='<div style="width:'+tabel_width+';background-color:'+bg_color+';border-width:3pt;border-style:solid;border-color:'+bg_color+';padding:0;margin:0;">';
		kazari2='</div>';
		if(document.layers){
			x_iti=event.pageX;
			y_iti=event.pageY;
			document.layers["lay"+doko].moveTo(x_iti+x_purasu,y_iti+y_purasu);
			document.layers["lay"+doko].document.open();
			document.layers["lay"+doko].document.write(kazari+moji[doko]+kazari2);
			document.layers["lay"+doko].document.close();
			document.layers["lay"+doko].visibility='show';}

		else if((document.getElementById) && (!document.all)){
			x_iti=event.pageX;
			y_iti=event.pageY;
			document.getElementById("lay"+doko).style.left=x_iti+x_purasu;
			document.getElementById("lay"+doko).style.top=y_iti+y_purasu;
			document.getElementById("lay"+doko).innerHTML=kazari+moji[doko]+kazari2;
			document.getElementById("lay"+doko).style.visibility='visible';}

		else if(document.all){
			x_iti=document.body.scrollLeft+event.clientX;
			y_iti=document.body.scrollTop+event.clientY;
			document.all("lay"+doko).style.pixelLeft=x_iti+x_purasu;
			document.all("lay"+doko).style.pixelTop=y_iti+y_purasu;
			document.all("lay"+doko).innerHTML=kazari+moji[doko]+kazari2;
			document.all("lay"+doko).style.visibility='visible';}
		}

	function hihyouji(doko){
		if(document.layers)
			document.layers["lay"+doko].visibility="hidden";
		else if((document.getElementById) && (!document.all))
			document.getElementById("lay"+doko).style.visibility="hidden";
		else if(document.all)
			document.all("lay"+doko).style.visibility="hidden";
		}

//-->
</script>

</head>

<body>

<a href="../../index.html" onMouseOver="hyouji(0,event);" onMouseOut="hihyouji(0);">JavaScript</a>
<span id="lay0" style="position:absolute;visibility:hidden;"></span><br>

<a href="../../lib_form.html" onMouseOver="hyouji(1,event);" onMouseOut="hihyouji(1);">サンプル集（フォーム）</a>
<span id="lay1" style="position:absolute;visibility:hidden;"></span><br>

<a href="../../lib_link.html" onMouseOver="hyouji(2,event);" onMouseOut="hihyouji(2);">サンプル集（リンク）</a>
<span id="lay2" style="position:absolute;visibility:hidden;"></span><br>

<a href="../../etc_link.html" onMouseOver="hyouji(3,event);" onMouseOut="hihyouji(3);">リンク</a>
<span id="lay3" style="position:absolute;visibility:hidden;"></span>

　・
　・
　・

</body></html>

[ 解説 ]

まず表示させたい説明文の文言を書き換えます。
上から6〜9行目に表示させる説明文が4つあります。

リンクの順番と対応しており、一番目が最初のリンクの説明文、二番目が二番目のリンクの説明文になっています。
文字の部分をお好きなように書き換えてください。
（リンクの数を増やした場合は、後述。）

上から11行目の「#f4d0ab」部分は、表示させる説明文の背景色を指定しています。
お好きな色にご変更下さい。

上から12行目と13行目にある
x_purasu=40;
y_purasu=0;
を変更すると、ヘルプを表示する位置を調整できます。
お好みによって変更してください。

上から14行目の「300」と言う数字は、表示される説明文の外枠の幅を指定しています。
この数字も必要に応じて、お好きなようにご変更下さい。

次にボディ内をご覧下さい。リンクがあります。
URL指定は、通常のリンクを貼る時と同じように「href=……」の部分にURLをお書き下さい。

現在サンプルでは4つのリンク先が設定されています。
最後は、これを増やしたり減らしたりする方法です。

まず一つのリンク先は2行で構成されています。

　<a href="../etc_link.html" onMouseOver="hyouji(3,event);" onMouseOut="hihyouji(3);">Link</a>
　<span id="lay3" style="position:absolute;visibility:hidden;"></span>

このように普通のアンカーの下にspanタグがあります。
本スクリプトでは、この2組で一つのリンク先が構成されています。

ですからリンク先を減らす場合は、必ずリンクだけでなく、その下にあるspanタグの行も削除して下さい。

またリンク先を減らした場合は、スクリプト内に記述している説明文も不要になってきます。
説明文は1行で構成されていますので、対応する行を削除して下さい。

例えばサンプルの一番最後の「Link」のリンクを消した場合。

まずボディ内でリンク先を削除します。

変更前
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);" onMouseOut="hihyouji(0);">JavaScript</a>
<span id="lay0" style="position:absolute;visibility:hidden;"></span><br>

<a href="../../index.html#JavaScript" onMouseOver="hyouji(1,event);" onMouseOut="hihyouji(1);">基礎講座</a>
<span id="lay1" style="position:absolute;visibility:hidden;"></span><br>

<a href="../lib_link.html" onMouseOver="hyouji(2,event);" onMouseOut="hihyouji(2);">Library</a>
<span id="lay2" style="position:absolute;visibility:hidden;"></span><br>

<a href="../etc_link.html" onMouseOver="hyouji(3,event);" onMouseOut="hihyouji(3);">Link</a>
<span id="lay3" style="position:absolute;visibility:hidden;"></span>
変更後
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);" onMouseOut="hihyouji(0);">JavaScript</a>
<span id="lay0" style="position:absolute;visibility:hidden;"></span><br>

<a href="../../index.html#JavaScript" onMouseOver="hyouji(1,event);" onMouseOut="hihyouji(1);">基礎講座</a>
<span id="lay1" style="position:absolute;visibility:hidden;"></span><br>

<a href="../lib_link.html" onMouseOver="hyouji(2,event);" onMouseOut="hihyouji(2);">Library</a>
<span id="lay2" style="position:absolute;visibility:hidden;"></span><br>


続いて、説明文を削除します。

変更前
moji[0]="JavaScriptのトップページです。<br>基礎講座とサンプル集があります。";
moji[1]="基礎講座のトップページです。<br>";
moji[2]="Libraryのトップページです。<br>";
moji[3]="Linkのトップページです。<br>Link集があります。";
変更後
moji[0]="JavaScriptのトップページです。<br>基礎講座とサンプル集があります。";
moji[1]="基礎講座のトップページです。<br>";
moji[2]="Libraryのトップページです。<br>";
これで、リンク先を減らす作業は完了です。

反対にリンク先を増やす場合ですが、要領は減らす場合と同じです。
減らす時に削除した部分を、削除するのではなく増やしてあげます。
コピーペーストでOKです。

ただし、もちろんそのままではいけません。
幾つか書き換える部分があります。

まずリンク部分。
とりあえず一番下のリンクとspanタグを、コピーペーストで増やしましょう。

次に「onMouseOver="hyouji(3,event);"」と「onMouseOut="hihyouji(3);"」部分と 「lay3」の数字の「3」を1繰り上げて「4」にします。

下に「JavaScript FAQ」のリンク先を追加した場合を例に書いてみますので、ご参考下さい。

変更前
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);" onMouseOut="hihyouji(0);">JavaScript</a>
<span id="lay0" style="position:absolute;visibility:hidden;"></span><br>

<a href="../../index.html#JavaScript" onMouseOver="hyouji(1,event);" onMouseOut="hihyouji(1);">基礎講座</a>
<span id="lay1" style="position:absolute;visibility:hidden;"></span><br>

<a href="../lib_link.html" onMouseOver="hyouji(2,event);" onMouseOut="hihyouji(2);">Library</a>
<span id="lay2" style="position:absolute;visibility:hidden;"></span><br>

<a href="../etc_link.html" onMouseOver="hyouji(3,event);" onMouseOut="hihyouji(3);">Link</a>
<span id="lay3" style="position:absolute;visibility:hidden;"></span>
変更後
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);" onMouseOut="hihyouji(0);">JavaScript</a>
<span id="lay0" style="position:absolute;visibility:hidden;"></span><br>

<a href="../../index.html#JavaScript" onMouseOver="hyouji(1,event);" onMouseOut="hihyouji(1);">基礎講座</a>
<span id="lay1" style="position:absolute;visibility:hidden;"></span><br>

<a href="../lib_link.html" onMouseOver="hyouji(2,event);" onMouseOut="hihyouji(2);">Library</a>
<span id="lay2" style="position:absolute;visibility:hidden;"></span><br>

<a href="../etc_link.html" onMouseOver="hyouji(3,event);" onMouseOut="hihyouji(3);">Link</a>
<span id="lay3" style="position:absolute;visibility:hidden;"></span>

<a href="../kiso_faq.html" onMouseOver="hyouji(4,event);" onMouseOut="hihyouji(4);">JavaScript FAQ</a>
<span id="lay4" style="position:absolute;visibility:hidden;"></span>
次に、説明文を追加します。

説明文も同じように、リンク先を減らす場合に削除した部分を増やしてあげます。
一番最後の行をコピーペーストで、増やしてみて下さい。

文言部分はお好きなように変えてください。
で、先頭にある「moji[3]」の数字の「3」の部分を、これも1繰り上げて「4」にします。

先ほどと同じように、下に例文を書きますのでご参考下さい。

変更前
moji[0]="JavaScriptのトップページです。<br>基礎講座とサンプル集があります。";
moji[1]="基礎講座のトップページです。<br>";
moji[2]="Libraryのトップページです。<br>";
moji[3]="Linkのトップページです。<br>Link集があります。";
変更後
moji[0]="JavaScriptのトップページです。<br>基礎講座とサンプル集があります。";
moji[1]="基礎講座のトップページです。<br>";
moji[2]="Libraryのトップページです。<br>";
moji[3]="Linkのトップページです。<br>Link集があります。";
moji[4]="WEST MiRaの更新情報です。<br>";

これで増やす作業は終了です。
もっと増やしたい場合は、同じ要領でどんどん追加して下さい。

（補足）

ポイントした際に、表示されるヘルプの場所を一カ所に固定したい場合は、 スクリプトを書き換える必要があります。

その場合は、スクリプト部分を以下のようにしてください。


     function hyouji(doko,event){
	moji=new Array();
	moji[0]="JavaScriptのトップページです。<br>基礎講座とサンプル集があります。";
	moji[1]="基礎講座のトップページです。<br>";
	moji[2]="Libraryのトップページです。<br>";
	moji[3]="Linkのトップページです。<br>Link集があります。";

	bg_color="#f4d0ab";
	x_purasu=40;
	y_purasu=0;
	tabel_width=300;
	kazari='<table width="'+tabel_width+'"  bgcolor="'+bg_color+'" cellpadding="4"><tr><td>';
	kazari2='</td></tr></table>';

	if(document.layers){
	   document.layers["lay"+doko].moveTo(x_purasu,y_purasu);
	   document.layers["lay"+doko].document.open();
	   document.layers["lay"+doko].document.write(kazari+moji[doko]+kazari2);
	   document.layers["lay"+doko].document.close();
	   document.layers["lay"+doko].visibility='show';}

	else if((document.getElementById) && (!document.all)){
	   document.getElementById("lay"+doko).style.left=x_purasu;
	   document.getElementById("lay"+doko).style.top=y_purasu;
	   document.getElementById("lay"+doko).innerHTML=kazari+moji[doko]+kazari2;
	   document.getElementById("lay"+doko).style.visibility='visible';}

	else if(document.all){
	   document.all("lay"+doko).style.pixelLeft=x_purasu;
	   document.all("lay"+doko).style.pixelTop=y_purasu;
	   document.all("lay"+doko).innerHTML=kazari+moji[doko]+kazari2;
	   document.all("lay"+doko).style.visibility='visible';}
     }

     function hihyouji(doko){
	if(document.layers)
		document.layers["lay"+doko].visibility="hidden";
	else if((document.getElementById) && (!document.all))
		document.getElementById("lay"+doko).style.visibility="hidden";
	else if(document.all)
		document.all("lay"+doko).style.visibility="hidden";}

位置は、
x_purasu=40;
y_purasu=0;
で指定してください。
x_purasuが横位置、y_purasuが縦位置です。

　 WEST MiRa > JavaScript > サンプル集(257種類) > DHTML > ポイントすると、リンク先のヘルプを表示 >

バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.