| リンクガイド ver.2.2 |
||||
◆サンプル ウェブ木箱 
サンプル集
メールフォーム |
||||
| ＜機能と特徴＞ ・カーソルをあわせるとメッセージが出ます。 ・メッセージの表示位置はリンクの先頭を 基準にしてますので定位置に表示されます。 |
||||
|
|
|
|
|
 |
|
| 公開日 | 2002.2.2 | ||
| 最終更新日 | 2003.11.6 | ||
| バージョン | ver.2.2 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | ||
| cookie | 不使用 | ||
| CSS | 使用 | ||
| 更新履歴 | 2002.9.18 | ver.1.1 | スクリプトの簡略化(変更点：全般) |
| 2003.7.20 | ver.2.0 | 動作を見直し(変更点：全般) | |
| 2003.11.4 | ver.2.1 | IE5.*での不具合を修正(変更点：全般) | |
| 2003.11.6 | ver.2.2 | Operaでの不具合を修正(変更点：全般) | |
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>〜</head>の間に書き込んでください。 ３．ソース２を<body>の直後に書き込んでください。 ３．ソース３を<body>〜</body>の間の表示したい位置に書き込んでください。 ５．ブラウザでテストしてみてください。 正常に動作すれば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■特にありません。
|
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■メッセージの表示位置を変更する。(半角数字：正の整数) //設定〜//ここまでの１〜２行目を変更してください。 １行目が横方向、２行目が縦方向の設定です。 基準点はリンクの前の<span>です。 li_x = 0; li_y = 24;■メッセージの周りの余白を変更する。(半角数字：正の整数) //設定〜//ここまでの３行目を変更してください。
li_pad = 3;
■メッセージの背景色を変更する。(RGB値,色名)//設定〜//ここまでの４行目を変更してください。
li_bg = '#efddba';
背景色を使わない場合は次のようにしてください。
li_bg = '';■メッセージを変更する。 //設定〜//ここまでの７行目を変更してください。
li_mes[1] = 'トップページに<br>戻ります';
■複数設置する。まず//設定〜//ここまでの７行目を増やし 該当個所の数字を増やし、該当個所を変更してください。 li_mes[2] = '新しいページです';次にソース３を表示したい位置に増やし、 該当個所の数字(３箇所)を変更してください。 <span id="li_link2" class="li_ilayer"></span> <a href="newpage.html" onMouseOver="link_guide_on(2);" onMouseOut="link_guide_off(2);">新しいページ</a> |
||||||
|
|
|||||
 |
 |
|
|
■ソース１(以下のソースを<head>〜</head>の間に書き込んでください) | |
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
//ver.2.2
li_mes = new Array();
//設定
li_x = 0; //メッセージの表示位置調節(横方向)
li_y = 24; //メッセージの表示位置調節(縦方向)
li_pad = 3; //メッセージの余白
li_bg = '#efddba'; //メッセージの背景色
li_mes[1] = 'トップページに<br>戻ります';
//ここまで
if(li_bg)
{li_bg = ' bgcolor="'+li_bg+'"'}
li_table = '<table border="0" cellpadding="'+li_pad+'" cellspacing="0">\n<tr>\n<td '+li_bg+' nowrap>\n';
li_table2= '</td>\n</tr>\n</table>';
function link_guide_on(i)
{with(document)
{if(document.all)
{all("li_info").style.left = all("li_link"+i).offsetLeft+li_x;
all("li_info").style.top = all("li_link"+i).offsetTop+li_y;
all("li_info").innerHTML = li_table+li_mes[i]+li_table2;
all("li_info").style.visibility = "visible";}
else if(document.getElementById)
{getElementById("li_info").style.left = getElementById("li_link"+i).offsetLeft+li_x;
getElementById("li_info").style.top = getElementById("li_link"+i).offsetTop +li_y;
getElementById("li_info").innerHTML = li_table+li_mes[i]+li_table2;
getElementById("li_info").style.visibility = "visible";}
else if(document.layers)
{layers["li_info"].left = layers["li_link"+i].pageX+li_x;
layers["li_info"].top = layers["li_link"+i].pageY+li_y;
layers["li_info"].document.open();
layers["li_info"].document.write(li_table+li_mes[i]+li_table2);
layers["li_info"].document.close();
layers["li_info"].visibility = "visible";}}}
function link_guide_off(i)
{with(document)
{if(document.all && navigator.userAgent.indexOf("Opera") == -1)
{all("li_info").style.visibility = "hidden";}
else if(document.getElementById)
{getElementById("li_info").style.visibility = "hidden";}
else if(document.layers)
{layers["li_info"].visibility = "hidden";}}}
with(document)
{open();
write('<style type="text/css">\n<!-\-\n');
if(document.all)
{write('.li_ilayer{position:absolute;}\n');}
else
{write('.li_ilayer{position:relative;}\n');}
write('.li_layer {position:absolute;visibility:hidden;}\n');
write('\n-\->\n<\/style>');
close();}
// -->
</script>
|
■ソース２(以下のソースを<body>〜</body>の間に書き込んでください) | |
<span id="li_info" class="li_layer"></span>
|
■ソース３(以下のソースを</body>の直前に書き込んでください) | |
<!--1個目の隠されるメッセージ-->
<span id="li_link1" class="li_ilayer"></span>
<a href="../index.html" onMouseOver="link_guide_on(1);" onMouseOut="link_guide_off(1);">トップページ</a>
 |
|