まず、説明文を表示する為のテキストボックスを配置し、
次に、メニューを配置します。
■説明文を表示するテキストボックスを配置
実際に説明文を表示させるためのテキストボックスを配置します。
この時、スタイルシートを組む事で、あたかもテキストボックスでは無いかのように見せる事も可能です。(^^;
(例)
<FORM name="f1">
<INPUT
type="TEXT"
name="i1"
value=""
style="border:0; color:darkgreen; background:transparent;"
READONLY>
</FORM>
|
●解説
name - JavaScriptで文字列を変更する時などに使用する。
value - デフォルトで表示する文字列。
border - 境界線のサイズを指定。0は境界線なし。
color - 文字色
background - 背景色。transparentを指定すると透明になる。
■メニューの配置
onmouseoverに、マウスを当てている時に説明ボックスの内容を変更するスクリプトを、
onmouseoutに、マウスが離れたときに内容を通常の文に戻すスクリプトを記述します。
(例)
<A
href="dummy.html"
onmouseover='f1.i1.value="AAAA"'
onmouseout='f1.i1.value="Default"'>
リンク
</A>
|
●解説
onmouseover - マウスを当てている時にスクリプトを実行
onmouseout - マウスが離れた時にスクリプトを実行
f1.i1.value - テキストボックスの内容を変更する
■必要最小限に圧縮したサンプル(^^;
<BODY bgcolor="#DDEEFF">
<!-- メニューの配置 -->
<A href="dummy.html"
onmouseover='f1.i1.value="日記です〜"'
onmouseout='f1.i1.value=""'>
日記帳 </A>
<BR>
<A href="dummy.html"
onmouseover='f1.i1.value="掲示板です〜"'
onmouseout='f1.i1.value=""'>
掲示板 </A>
<BR>
<A href="dummy.html"
onmouseover='f1.i1.value="リンク集です〜"'
onmouseout='f1.i1.value=""'>
リンク </A>
<BR>
<!-- 説明ボックスの配置 -->
<FORM name="f1">
<INPUT type="TEXT"
name="i1"
value=""
style="border:0; color:darkgreen; background:transparent;"
READONLY>
</FORM>
</BODY>
|
|