※同様の処理が「Javascriptサンプル」にもある場合があります。
そちらの方もご参照下さい。

■ オンマウス(マウスを乗せると)でテキストボックスに説明を表示

リンク文字にマウスを当てるとテキストボックスに解説が表示されます。

リンク文字だけでなく、通常の文字、画像、レイアウト枠(レイヤー)などどのタグでも利用可能です。

◆ 実行サンプル



略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【 記述サンプル 】

まず、解説を表示するテキストエリア(「textarea」)を1つ作ります。
<form name="form1"id="form1" method="post" action=""> <textarea name="text1"></textarea> </form>

もし、1行テキストボックスにしたい場合は、次のように記述します。
<form name="form1"id="form1" method="post" action=""> <input type="text" name="text1"> </form>

このサンプルでは次のように記述しています。
<a href="/" onmouseover="form1.text1.value='トップページへジャンプします';" onmouseout="form1.text1.value='';">トップページへジャンプ</a><br>
<a href="../smphtm/color.html" onmouseover="form1.text1.value='カラーサンプルへジャンプします';" onmouseout="form1.text1.value='';">カラーサンプルへジャンプ</a><br>
<a href="/images/exp/baloon.gif" onmouseover="form1.text1.value='画像を表示します';" onmouseout="form1.text1.value='';">画像を表示</a><br>
<span onmouseover="form1.text1.value='説明だけの表示';" onmouseout="form1.text1.value='';">説明だけの表示</span><br>

次のように記述することもできます。
<a href="/" onmouseover="form1['text1'].value='トップページへジャンプします';" onmouseout="form1['text1'].value='';">トップページへジャンプ</a><br>
<a href="../smphtm/color.html" onmouseover="form1['text1'].value='カラーサンプルへジャンプします';" onmouseout="form1['text1'].value='';">カラーサンプルへジャンプ</a><br>
<a href="/images/exp/baloon.gif" onmouseover="form1['text1'].value='画像を表示します';" onmouseout="form1['text1'].value='';">画像を表示</a><br>
<span onmouseover="form1['text1'].value='説明だけの表示';" onmouseout="form1['text1'].value='';">説明だけの表示</span><br>


page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom