マウスオーバーで説明文 | 資料室 | Windowsアプリ、iPhoneアプリ、ゲーム向けフリー音源のMeteoric Stream

リンクにマウスを当てている時に、説明文を表示する

まず、説明文を表示する為のテキストボックスを配置し、次に、メニューを配置します。

■説明文を表示するテキストボックスを配置

実際に説明文を表示させるためのテキストボックスを配置します。
この時、スタイルシートを組む事で、あたかもテキストボックスでは無いかのように見せる事も可能です。(^^;

（例）

<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>

資料室のトップに戻る

リンクにマウスを当てている時に、説明文を表示する

Spotifyでフォローする

Meteoric Streamについて

メインコンテンツ目次

運営者情報