リンクをクリックすると、隣のセル内の文章が変わります。
何を表示させるかは自由です。
説明文でも良いし、リンクでも良いし、画像でも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>';
|
|
