WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
[ JavaScriptの目次 ]
▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

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

 

■ JavaScript - サンプル集(257種類) - DHTML
　　 - ポップアップメニュー DHTML版 Ver2（ポイントでメニュー表示）

リンク先をポイントすると、メニューが表示されます。

メニュー以外でも、説明文を書いて中にリンクを貼る…… なんて応用も可能です。

ただし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

	//メニューをマウスポインタからどの程度離すのか、横の距離を指定する
	x_purasu=-20;
	//メニューをマウスポインタからどの程度離すのか、縦の距離を指定する
	y_purasu=-20;

	//メニューが全部で幾つあるのか、数を指定する
	kazu=4;

	function hyouji(doko,event)
		{
		hihyouji(doko);
		if(document.layers)
			{
			x_iti=event.pageX;
			y_iti=event.pageY;
			document.layers["lay"+doko].moveTo(x_iti+x_purasu,y_iti);
			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).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).style.visibility='visible';
			}
		}

	function ie_hyouji(doko)
		{
		if((document.getElementById) && (!document.all))
			document.getElementById("lay"+doko).style.visibility='visible';
		else if(document.all)
			document.all("lay"+doko).style.visibility='visible';
		}

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

	function hajime()
		{
		for(i=0; i<kazu; i++)
			if(document.layers)document.layers["lay"+i].onmouseout=hihyouji;
		}

//-->
</script>

</head>

<body onLoad="hajime();">

<table><tr><td>
<a href="../../index.html" onMouseOver="hyouji(0,event);">基礎講座</a><br>
	<span id="lay0" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(0);" onMouseOut="hihyouji();">　
		<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
		基礎講座のトップページです。<br>
		<tt>△</tt><a href="../../index.html" onMouseOver="ie_hyouji(0);">JavaScriptトップ</a><br>
		<tt>△</tt><a href="../../kiso_faq.html" onMouseOver="ie_hyouji(0);">JavaScript FAQ</a><br>
		</td></tr></table>
	</span>

</td><td>

<a href="../../index.html" onMouseOver="hyouji(1,event);">JavaScript</a><br>
	<span id="lay1" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(1);" onMouseOut="hihyouji();">　
		<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
		JavaScriptのトップページです。<br>基礎講座とサンプル集があります。<br>
		<tt>△</tt><a href="../../index.html" onMouseOver="ie_hyouji(1);">JavaScriptトップ</a><br>
		<tt>△</tt><a href="../../kiso_basis.html" onMouseOver="ie_hyouji(1);">基礎講座</a><br>
		<tt>△</tt><a href="../../etc_dl.html" onMouseOver="ie_hyouji(1);">DL版</a><br>
		</td></tr></table>
	</span>

</td><td>

<a href="../../lib_link.html" onMouseOver="hyouji(2,event);">Library</a><br>
	<span id="lay2" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(2);" onMouseOut="hihyouji();">　
		<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
		Libraryのトップページです。<br>
		<tt>△</tt><a href="../../index.html" onMouseOver="ie_hyouji(2);">JavaScript</a><br>
		<tt>△</tt><a href="../../lib_link.html" onMouseOver="ie_hyouji(2);">Library(Link)</a><br>
		<tt>△</tt><a href="../../lib_color.html" onMouseOver="ie_hyouji(2);">Library(Color)</a><br>
		</td></tr></table>
	</span>

</td><td>

<a href="../../etc_link.html" onMouseOver="hyouji(3,event);">Link</a><br>
	<span id="lay3" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(3);" onMouseOut="hihyouji();">　
		<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
		Linkのトップページです。<br>Link集があります。<br>
		<tt>△</tt><a href="../../etc_link.html" onMouseOver="ie_hyouji(3);">Link</a><br>
		</td></tr></table>
	</span>

</td></tr></table>

　・
　・
　・
</body></html>

[ 解説 ]

まず上から5行目にある
kazu=4;
に、親元リンクの数をお書き下さい。

サンプルの場合は、Front、JavaScript、Library(Link)、Linkの4つですから、4が入っています。

数を上下させた場合は、必ず書き換えてください。

次にその下にある
x_purasu=-20;
y_purasu=-20;
は、表示されるメニューの位置を指定します。
x_purasuは横位置、y_purasuは縦位置です。

数値を変えると、表示される位置が微妙に変わります。
変更したい方はご変更下さい。
（ただし絶対指定ではないので、位置の固定が出来る訳ではありません。）

最後に、実際に使用する親元リンクの名称変更と、表示されるメニューを書き換えます。

まず一つのリンクは、どのように構成されているのか、そこから説明します。

一つのリンクは、「<a href=……」から始まり、「</span>」までで構成されています。

例えばサンプルの場合、

<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);">基礎講座</a><br>
<span id="lay0" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(0);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
基礎講座のトップページです。<br>
<tt>△</tt><a href="../../index.html#JavaScript" onMouseOver="ie_hyouji(0);">JavaScriptトップ</a><br>
<tt>△</tt><a href="../kiso_faq.html" onMouseOver="ie_hyouji(0);">JavaScript FAQ</a><br>
</td></tr></table>
</span>

で、一つのリンクです。
1行目が画面上に表示される親元リンクです。
2行目から8行目までが、ポイントされた際に表示される内容です。

4行目にある「WEST MiRaのトップページです。……」というのは説明文です。
不要な方は削除してください。

その下にメニュー内のリンクがあります。
メニュー内のリンクを減らす時は、不要な行を減らしてください。

例えば1つ減らしたとすると、以下のようになります。

変更前
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);">基礎講座</a><br>
<span id="lay0" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(0);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
基礎講座のトップページです。<br>
<tt>△</tt><a href="../../index.html#JavaScript" onMouseOver="ie_hyouji(0);">JavaScriptトップ</a><br>
<tt>△</tt><a href="../kiso_faq.html" onMouseOver="ie_hyouji(0);">JavaScript FAQ</a><br>
</td></tr></table>
</span>
変更後
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);">基礎講座</a><br>
<span id="lay0" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(0);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
基礎講座のトップページです。<br>
<tt>△</tt><a href="../../index.html#JavaScript" onMouseOver="ie_hyouji(0);">JavaScriptトップ</a><br>
</td></tr></table>
</span>

メニュー内のリンクを増やす場合は、ご注意下さい。
メニュー内のリンクは、通常のリンクタグではなく後ろに訳のわからないものがついています。
これが必ず必要です。

で、サンプルのメニュー内のリンクを見て頂くと、微妙に数値が変わっています。
後ろの方にある「ie_hyouji(0);」や「ie_hyouji(1);」の事です。
この数値は、親元リンクに合致しています。

例えば1つ目のリンク「Front」であれば、
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);">基礎講座</a>
0（赤字部分）がありますね。

ですからメニュー内の各リンクも
<tt>△</tt><a href="../../index.html" onMouseOver="ie_hyouji(0);">JavaScriptトップ</a><br>
<tt>△</tt><a href="../kiso_faq.html" onMouseOver="ie_hyouji(0);">JavaScript FAQ</a><br>
に、なります。

実際にメニュー内のリンクを1つ増やした場合を例に挙げます。
その際は、以下のようになります。

変更前
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);">基礎講座</a><br>
<span id="lay0" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(0);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
基礎講座のトップページです。<br>
<tt>△</tt><a href="../../index.html#JavaScript" onMouseOver="ie_hyouji(0);">JavaScriptトップ</a><br>
<tt>△</tt><a href="../kiso_faq.html" onMouseOver="ie_hyouji(0);">JavaScript FAQ</a><br>
</td></tr></table>
</span>
変更後
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);">基礎講座</a><br>
<span id="lay0" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(0);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
基礎講座のトップページです。<br>
<tt>△</tt><a href="../../index.html#JavaScript" onMouseOver="ie_hyouji(0);">JavaScriptトップ</a><br>
<tt>△</tt><a href="../kiso_faq.html" onMouseOver="ie_hyouji(0);">JavaScript FAQ</a><br>
<tt>△</tt><a href="../../index.html" onMouseOver="ie_hyouji(0);">JavaScript2</a><br>
</td></tr></table>
</span>

親元のリンクを増やす場合は、ひとまとめのリンク情報を丸ごと追加し、 必要な情報を書き換えてください。

リンクの名前や説明文、メニュー内のリンクは今までの説明を元に書き換えてください。

また親元リンクを増やした場合、必ず書き換えなければならない箇所があります。

1つ目のサンプルは

<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);">基礎講座</a><br>
<span id="lay0" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(0);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
基礎講座のトップページです。<br>
<tt>△</tt><a href="../../index.html#JavaScript" onMouseOver="ie_hyouji(0);">JavaScriptトップ</a><br>
<tt>△</tt><a href="../kiso_faq.html" onMouseOver="ie_hyouji(0);">JavaScript FAQ</a><br>
</td></tr></table>
</span>

2つ目のサンプルは

<a href="../../index.html#JavaScript" onMouseOver="hyouji(1,event);">JavaScript</a><br>
<span id="lay1" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(1);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
JavaScriptのトップページです。<br>基礎講座とサンプル集があります。<br>
<tt>△</tt><a href="../../index.html#JavaScript" onMouseOver="ie_hyouji(1);">JavaScriptトップ</a><br>
<tt>△</tt><a href="../kiso_basis.html" onMouseOver="ie_hyouji(1);">基礎講座</a><br>
<tt>△</tt><a href="../etc_dl.html" onMouseOver="ie_hyouji(1);">DL版</a><br>
</td></tr></table>
</span>

赤字の部分を見ると、一目瞭然ですね。
数値が1つずつ繰り上がっています。

このように親元リンクを増やした場合は、数値を必ず変更してください。

また一番はじめに説明した、スクリプト内のkazu変数の数値も書き換えてください。

サンプルに1つ親元リンクを増やした場合の例を挙げておきます。

変更前
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);">基礎講座</a><br>
<span id="lay0" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(0);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
基礎講座のトップページです。<br>
<tt>△</tt><a href="../../index.html#JavaScript" onMouseOver="ie_hyouji(0);">JavaScriptトップ</a><br>
<tt>△</tt><a href="../kiso_faq.html" onMouseOver="ie_hyouji(0);">JavaScript FAQ</a><br>
</td></tr></table>
</span>

……

<a href="../etc_link.html" onMouseOver="hyouji(3,event);">Link</a><br>
<span id="lay3" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(3);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
Linkのトップページです。<br>Link集があります。<br>
<tt>△</tt><a href="../etc_link.html" onMouseOver="ie_hyouji(3);">Link</a><br>
</td></tr></table>
</span>
変更後
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);">基礎講座</a><br>
<span id="lay0" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(0);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
基礎講座のトップページです。<br>
<tt>△</tt><a href="../../index.html#JavaScript" onMouseOver="ie_hyouji(0);">JavaScriptトップ</a><br>
<tt>△</tt><a href="../kiso_faq.html" onMouseOver="ie_hyouji(0);">JavaScript FAQ</a><br>
</td></tr></table>
</span>

……

<a href="../etc_link.html" onMouseOver="hyouji(3,event);">Link</a><br>
<span id="lay3" style="position:absolute;visibility:hidden;" onMouseOver="ie_hyouji(3);" onMouseOut="hihyouji();">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
Linkのトップページです。<br>Link集があります。<br>
<tt>△</tt><a href="../etc_link.html" onMouseOver="ie_hyouji(3);">Link</a><br>
</td></tr></table>
</span>

……

<a href="../etc_link.html" onMouseOver="hyouji(4,event);" onMouseOver="hihyouji(4);">Link2</a><br>
<span id="lay3" style="position:absolute;visibility:hidden;" onMouseOut="counts(4);">　
<table width="300" bgcolor="#f4d0ab" cellpadding="15"><tr><td>
Link2のトップページです。<br>Link集があります。<br>
<tt>△</tt><a href="../etc_link.html" onMouseOver="ie_hyouji(4);">Link2</a><br>
</td></tr></table>
</span>

（補足）

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

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


	x_purasu=0;
	y_purasu=300;
	kazu=4;
	count=0;
	function hyouji(doko,event)
		{
		hihyouji(doko);
		if(document.layers)
			{
			x_iti=event.pageX;
			y_iti=event.pageY;
			document.layers["lay"+doko].moveTo(x_purasu,y_purasu);
			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_purasu;
			document.getElementById("lay"+doko).style.top=y_purasu;
			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_purasu;
			document.all("lay"+doko).style.pixelTop=y_purasu;
			document.all("lay"+doko).style.visibility='visible';
			}
		}

	function ie_hyouji(doko)
		{
		if(document.all)
			{
			document.all("lay"+doko).style.visibility='visible';
			}
		}

	function hihyouji(doko)
		{
		for(i=0; i<kazu; i++)
			{
			if(doko!=i)
			{
			if(document.layers)
				document.layers["lay"+i].visibility="hidden";
			else if((document.getElementById) && (!document.all))
				document.getElementById("lay"+i).style.visibility="hidden";
			else if(document.all)
				document.all("lay"+i).style.visibility="hidden";
			}
			}
		count=0;
		return;
		}

	function counts()
		{
		if(count==0)count++;
		else hihyouji(kazu);
		}

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

　 WEST MiRa > JavaScript > サンプル集(257種類) > DHTML > ポップアップメニュー DHTML版 Ver2（ポイントでメニュー表示） >

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

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