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

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

 

■ JavaScript - サンプル集(257種類) - DHTML
　　 - ポップアップメニュー DHTML版 Ver4（テーブル）

リンクをクリックすると、隣のセル内の文章が変わります。
何を表示させるかは自由です。
説明文でも良いし、リンクでも良いし、画像でもOKです。

IE5以降、NN6以降限定です。

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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>";

	function menu(doko)
		{
		if(document.all)document.all("lay"+doko).innerHTML=moji[doko];
		else if((document.getElementById) && (!document.all))
			document.getElementById("lay"+doko).innerHTML=moji[doko];
		}

//-->
</script>

</head>

<body><br>

<table border="1">
<tr>
<td>
<a href="JavaScript:menu(0);">JavaScript</a>
</td>
<td width="250" height="100" id="lay0" style="position:relative;visibility:visible;">
JavaScriptのトップページです。<br>
</td>
</tr>

<tr>
<td>
<a href="JavaScript:menu(1);">サンプル集（フォーム）</a>
</td>
<td width="250" height="100" id="lay1" style="position:relative;visibility:visible;">
サンプル集（フォーム）です。<br>
</td>
</tr>

<tr>
<td>
<a href="JavaScript:menu(2);">サンプル集（リンク）</a>
</td>
<td width="250" height="100" id="lay2" style="position:relative;visibility:visible;">
サンプル集（リンク）です。<br>
</td>
</tr>
</table>

</body></html>

[ 解説 ]

まず上から6〜8行目が、クリックされた時に表示される文字列です。
6行目が1つ目のリンク、7行目が2つ目のリンク、8行目が3つ目のリンクの文字列です。

お好きなように書き換えてください。
内部にタグを記述する事も出来ます。

HTML部分は、ごく普通に書き換えてください。
リンクの名称やセル内の情報・テーブルの色づけなどもお好きなように書き換えてください。

また、必ずセルの大きさは指定で指定しましょう。
指定しない場合、クリックした途端にテーブルの大きさがかなり変わってしまう場合があります。

はじめに表示されている文字列と、 クリックされた際に表示される文字列の長さがほぼ同じ場合は、特に問題ないでしょう。

もう一つ、各セルの
<td width="250" height="100" id="lay*" style="position:relative;visibility:visible;">
の赤字部分は変更しないでください。

同じようにHTML部分ソースを見ると、見慣れない数値部分があります。
HTML部分だけを抜き出してみましょう。

<td>
<a href="JavaScript:menu(0);">WEST MiRa</a>
</td>
<td width="250" height="100" id="lay0" style="position:relative;visibility:visible;">
WEST MiRaのトップページです。<br>
</td>
</tr>

<tr>
<td>
<a href="JavaScript:menu(1);">Library(Link)</a>
</td>
<td width="250" height="100" id="lay1" style="position:relative;visibility:visible;">
Library(Link)のトップページです。<br>
</td>
</tr>

<tr>
<td>
<a href="JavaScript:menu(2);">JavaScript</a>
</td>
<td width="250" height="100" id="lay2" style="position:relative;visibility:visible;">
JavaScriptのトップページです。<br>
</td>

赤字部分だけを見てください。
わかりますか？
下に行くほど数値が増えています。

このように、数値部分は必ず一つ一つ異なる必要があります。
ですからもしテーブルのセルを増やしていくならば、 必ず数値部分も1つずつ繰り上げてください。

例えばサンプルにリンク情報を1つ増やした場合は、以下のようになります。

変更前
<table border="1">
<tr>
<td>
<a href="JavaScript:menu(0);">WEST MiRa</a>
</td>
<td width="250" height="100" id="lay0" style="position:relative;visibility:visible;">
WEST MiRaのトップページです。<br>
</td>
</tr>

<tr>
<td>
<a href="JavaScript:menu(1);">Library(Link)</a>
</td>
<td width="250" height="100" id="lay1" style="position:relative;visibility:visible;">
Library(Link)のトップページです。<br>
</td>
</tr>

<tr>
<td>
<a href="JavaScript:menu(2);">JavaScript</a>
</td>
<td width="250" height="100" id="lay2" style="position:relative;visibility:visible;">
JavaScriptのトップページです。<br>
</td>
</tr>
</table>
変更後
<table border="1">
<tr>
<td>
<a href="JavaScript:menu(0);">WEST MiRa</a>
</td>
<td width="250" height="100" id="lay0" style="position:relative;visibility:visible;">
WEST MiRaのトップページです。<br>
</td>
</tr>

<tr>
<td>
<a href="JavaScript:menu(1);">Library(Link)</a>
</td>
<td width="250" height="100" id="lay1" style="position:relative;visibility:visible;">
Library(Link)のトップページです。<br>
</td>
</tr>

<tr>
<td>
<a href="JavaScript:menu(2);">JavaScript</a>
</td>
<td width="250" height="100" id="lay2" style="position:relative;visibility:visible;">
JavaScriptのトップページです。<br>
</td>
</tr>

<tr>
<td>
<a href="JavaScript:menu(3);">Tarot</a>
</td>
<td width="250" height="100" id="lay3" style="position:relative;visibility:visible;">
Tarotのトップページです。<br>
</td>
</tr>
</table>
リンク情報を増やしたら、クリックされた時に表示される文字列も増やす必要があります。

クリックされた時に表示される文字列部分を見ると

moji[0]='全コンテンツに繋がっています。<br><a href="../../kisoku.html">Information</a><br><a href="../../game/game.html">Game</a>';
moji[1]='占いがあります。<br><a href="../lib_link.html">Library(Link)</a>';
moji[2]='基礎講座とサンプル集があります。<br><a href="../../index.html#JavaScript">JavaScript</a>';
ここにも数値がありますね。

これまた増やすときは、同じように数値を繰り上げていきます。

では先ほどと同じようにサンプルに1つ情報を追加してみましょう。

変更前
moji[0]='全コンテンツに繋がっています。<br><a href="../../kisoku.html">Information</a><br><a href="../../game/game.html">Game</a>';
moji[1]='占いがあります。<br><a href="../lib_link.html">Library(Link)</a>';
moji[2]='基礎講座とサンプル集があります。<br><a href="../../index.html#JavaScript">JavaScript</a>';
変更後
moji[0]='全コンテンツに繋がっています。<br><a href="../../kisoku.html">Information</a><br><a href="../../game/game.html">Game</a>';
moji[1]='占いがあります。<br><a href="../lib_link.html">Library(Link)</a>';
moji[2]='基礎講座とサンプル集があります。<br><a href="../../index.html#JavaScript">JavaScript</a>';
moji[3]='タロット占いがあります。<br><a href="../../index.html#JavaScript">JavaScript</a>';

　 WEST MiRa > JavaScript > サンプル集(257種類) > DHTML > ポップアップメニュー DHTML版 Ver4（テーブル） >

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

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