トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

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

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

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

◆ 実行サンプル


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

【 解    説 】

まず、説明を表示する領域としてテキストエリア(「textarea」)をひとつ用意し、そのテキストエリアに名前をつけます。
今回は「text1」という名前にしました。
また、このテキストエリアを設置するためのフォームの名前は「form1」としています。

<form name="form1"> <textarea name="text1"></textarea> </form1>

このテキストエリアに文字をセットする場合は、次のように記述することができます。

document.form1.text1.value = 'セットする文字列'; document.form1['text1'].value = 'セットする文字列';

しかし、セットしたい領域が2つ以上あった場合や別々の文字列を表示したい場合、その組み合わせの数だけ別々の処理を記述していたのでは無駄がありますから、セットする領域の名前と、セットしたい文字をパラメータ(引数)で渡し、受け取った情報により、その処理を判断させるような方法を取ります。

したがってサブルーチン呼び出し時に、「セットする場所の名前」、「その文字列」をパラメータで与えるようにします。
呼び出しサブルーチンの名前を「txt_dsp」とした場合、その呼び出しは、次のように記述します。

txt_dsp('セットする場所の名前', 'セットする文字列');

これらをサブルーチン側では次のように変数で受けます。

function txt_dsp(name0, str0){ }

受け取った変数を利用して、先ほどの文字列セットを書き直すと次のようになります。 form1[name0].value = str0;

マウスが乗った時の処理は「onmouseover=""」を使い、次のように記述します。 onmouseover="txt_dsp('text1', 'セットしたい文字列')"

また、マウスが離れた時、空白にしたいのであれば、「onmouseout=""」を使用して、次のように記述します。
この場合、文字を何も表示したくないわけですから、文字を記述していない「''」を渡します。
onmouseout="txt_dsp('text1', '')"

【 記述サンプル 】

まず、テキストエディタなどを使用し、次の記述を「onmtxtj.js」というファイル名で保存します。
function txt_dsp(name0, str0){ document.form1[name0].value = str0; }


次に、HEAD句内Javascriptの呼び出しを次のように記述します。
<script type="text/javascript" src="onmtxtj.js"></script>

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

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

最後に、テキスト表示をさせるサンプルを次のように記述します。
<a href="/" onmouseover="txt_dsp('text1','トップページへジャンプします');"onmouseout="txt_dsp('text1', '');">トップページへジャンプ</a><br>
<a href="../smphtm/color.html" onmouseover="txt_dsp('text1','カラーサンプルへジャンプします');"onmouseout="txt_dsp('text1', '');">カラーサンプルへジャンプ</a><br>
<a href="/images/exp/baloon.gif" onmouseover="txt_dsp('text1','画像を表示します');"onmouseout="txt_dsp('text1', '');">画像を表示</a><br>
<span onmouseover="txt_dsp('text1','説明だけの表示');"onmouseout="txt_dsp('text1', '');">説明だけの表示</span><br>



page update:2010/01/23 20:32

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