リンク先をポイントすると、その横に説明文を表示させるスクリプトです。
ただし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が縦位置です。
|
