m008
リンク文字にマウスを重ねるとテキストフィールドにメッセージを表示する
Copyright(C) 2004 web工房 All Rights Reserved
action
(テキストフィールドに INPUT(一行テキスト領域)を用いる方法)
画像
1番ホール
2番ホール
(ホール名の上にカーソルを重ねて下さい)
(テキストフィールドに textarea メッセージに配列を用いる方法)
 画像 |
1番ホール | |
| 2番ホール | ||
| (ホール名の上にカーソルを重ねて下さい) | ||
web技
; (テキストフィールドに INPUT(一行テキスト領域)を用いる方法)
※<form>/<input>/<img>にそれぞれname属性を設定します
※onmouseover/onmouseoutに直接変更内容を記述します
※Case2に比べてこちらの方が簡単ですが、記述は長く(複雑に)なります
-----次の行から(copy)-----
<form name="FORM9">
<input type="text" name="MSG9" size="18" style="text-align:center;">テスキトフィールド(一行テキスト領域)<br>
<img src="photo/000_s2.JPG" name="IMAGE9" width="100" height="75" border="1" align="left"></form> 画像<br>
<a href="#" onmouseover="FORM9.MSG9.value='1番ホール'; IMAGE9.src='photo/001_s2.JPG';" onmouseout="FORM9.MSG9.value=''; IMAGE9.src='photo/000_s2.JPG';">1番ホール</a><br>
<a href="#" onmouseover="FORM9.MSG9.value='2番ホール'; IMAGE9.src='photo/002_s2.JPG';" onmouseout="FORM9.MSG9.value=''; IMAGE9.src='photo/000_s2.JPG';">2番ホール</a><br>
(ホール名の上にカーソルを重ねて下さい)
-----上の行まで(copy)-----
■CASE 2 メッセージの数が多くて、メッセージの長さも長い場合など
(テキストフィールドに textarea(複数テキスと領域)、メッセージに配列を用いる方法)
◆手順1a【テキストフィールド設置】
※テキストフィールドを<body>〜</body>間に作成する
※テキストフィールド(textarea)は<form>〜</form>内に記述し、name属性を指定する。
※<form>にもname属性を指定する
-----次の行から(copy)-----
<form name="FORM">
<textarea rows="5" cols="50" name="CORSE"></textarea>
</form>
-----上の行まで(copy)-----
◆手順1b【表示画像設置】
※最初に表示する画像を<body>〜</body>間に設置する
※画像にはname属性を指定する。
-----次の行から(copy)-----
<img src="photo/000_s2.JPG(画像までの相対パス)" name="IMAGE"
width="100" height="75" border="1">
-----上の行まで(copy)-----
◆手順2【スクリプト実行】
※スクリプトを実行する<body>〜</body>間に記述
-----次の行から(copy)-----
<a href="#" onmouseover="ChengeMsg(1)" onmouseout="ChengeMsg(0)">1番ホール</a>
-----上の行まで(copy)-----
◆手順3【javascript】<head>〜</head>間に記述
※msg[index]はメッセージ配列 img[index]は画像配列
-----次の行から(copy)-----
<script language="JavaScript">
<!--
msg=new Array();
msg[0]="〇〇GC";
msg[1]="【No.1】\n◆OUTスタートホール\n◆373yard/PAR4ミドルホール◆若干の打ち上げでほぼまっすぐ◆左OB右1ペナ◆";
msg[2]="【No.2】\n◆2ホール目はもうロング\n◆480yard/PAR5、打ち上げ・左ドッグレッグクのロングホール◆真ん中の木ねらい◆";
img=new Array();
img[0]="photo/000_s2.JPG";
img[1]="photo/001_s2.JPG";
img[2]="photo/002_s2.JPG";
function ChengeMsg(index){
document.FORM.CORSE.value=msg[index];
document.IMAGE.src=img[index];
}
//-->
</script>
-----上の行まで(copy)-----
解説等
◆リンク文字にマウスを重ねると、テキストフィールドにコンメトを表示し、また、表示画像を変更します。テスキトフィールドと画像の変更は同時に実行する必要はありません。
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の｢action｣ではhtml上に配置するテキストフィールドや画像、リンク文字はテーブル上に配置しています(テーブル枠非表示)。
◆手順2で、 ※<a href="#">としたのは｢1番ホール｣という文字をリンク文字にするためで、実際にリンクする画像やファイルのパスを記述することもできます。その場合はクリックするとリンクします。また、｢onmouseover="ChengeMsg(index)"｣で実行するスクリプトのindexを指定します。
◆メッセージ配列及び画像配列は[0]からスタードして下さい。
◆メッセージ配列に記述されたメッセージの \n 記号は｢改行｣するためのエスケープ文字([技005]参照)
【応用技】
表示されるメッセージ等がソース表示で全部見えると興ざめだったりしますし、メッセージ配列が増えると結構javascriptが長くなってしまいます。実際問題としては、javascriptの部分は<head>〜</head>間に記述せず外部スクリプトにした方が実用的です。このファイルも外部スクリプトにしてあります。[技k007]を参照して下さい。
keyword
◇Array◇textarea
注意
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----