リンクの補足説明をレイヤー表示

Java Scriptって何？

Java Scriptに初めて触れる方はまずこちらへ。

タグの絵本＞ Java Script ＞リンクの補足説明をレイヤー表示

■　リンクの補足説明をレイヤー表示

サンプル

	トップページ

	HTMLタグ

	作成支援ツール

プログラムソース＆解説

　　　　▽STEP1
　　　　

　　　　上記プログラムをHEAD内に書き込みます。
　　　　「ここから設定～ここまで」で区切られた部位を編集します。
　　　　msg==☆の行でとりあえず説明文を設定しておきます。
　　　　同じようにmsg==4,msg==5と増やして行くことでいくつでも説明表示可能です。
　　　　<table>タグを編集することでサイトに合った見易いデザインにできます。

　　　　-----------------------------------------------------------------------

　　　　▽STEP2
　　　　

　　　　BODY内に
　　　　<div id="pop1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"></div>
　　　　と書き込む。

　　　　リンクタグを貼る際、補足説明を表示させたいリンクとSTEP1で設定したmsg==1の数字と合わせ、pop_msg(1)のように設定する。

使用例

ソース　（テスト書き込み可）

<html>
<head>
<title>あなたのホームページ</title>
<SCRIPT language="JavaScript">
<!--
// リンクの補足説明をレイヤー表示
function pop_msg(msg) {
// ↓↓↓ここから設定↓↓↓
desc = "<table border='0' cellpadding='5' style='background-color:#cccccc; filter:Alpha(opacity=85);'><td><font size='-1'>";
if (msg==1) desc += "トップページへ戻ります";
if (msg==2) desc += "プレビュー表示でHTMLタグを公開しています。<BR>お役立て下さい。";
if (msg==3) desc += "作成支援ツールです。<BR>フレームタグ自動生成などお役に立てると思います。";
desc += "</font></td></table>";
// ↑↑↑ここまで↑↑↑

X = event.x + document.body.scrollLeft;
Y = event.y + document.body.scrollTop;
document.all["pop1"].innerHTML = desc;
document.all["pop1"].style.left= X + 8;
document.all["pop1"].style.top = Y + 16;
}

function pop1_out(a){
pop1.innerHTML="";
}
//-->
</SCRIPT>
</head>

<body>
ホームページ作成中。頑張ります！
<BR>
<BR>
<div id="pop1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"></div>

<A href="../main.htm" onmousemove="pop_msg(1)" onmouseout="pop1_out(-50)">トップページ</A>
<A href="../html_t.htm" onmousemove="pop_msg(2)" onmouseout="pop1_out(-50)">HTMLタグ</A>
<A href="../tool/tool_top.htm" onmousemove="pop_msg(3)" onmouseout="pop1_out(-50)">作成支援ツール</A>
</body>

</html>

あなたのホームページ　Internet Explorer

ファイル(F)　編集(E)　表示(V)　お気に入り(A)　ツール(T)　ヘルプ(H)

ホームページ作成中。頑張ります！

トップページ

HTMLタグ

作成支援ツール

→index