事例紹介−２：画像の入れ替え（ロールオーバー）
| トップ | 概 説 | 記述の仕方 | 事例： | １．メッセージ | ２．画像の入替 | ３．画像を動かす | ４．見積計算 |
この例はＨＰで良く見られるナビゲーションメニューで、マウスを画像に動かすと画像が変化するスクリプトです。ＨＰのナビゲーションメニューに良く利用されています。
画像にマウスを動かすと画像が変わる
| a b |
function button1_1() {document.button01.src="image/pt_jirei-2_1.jpg"; } function button1_2() {document.button01.src="image/pt_jirei-2_2.jpg"; } |
 |
| c |
<IMG src="image/pt_jirei-2_2.jpgf" width="141" height="20" border="0" name="button01" onmouseover="button1_2()" onmouseout="button1_1()" alt="ポインセチア"> |
a 関数（button1_1）は、button01のファイル（src="image/pt_jirei-2_1.gif";）を表示（document)
b 関数（button1_2）は、button02のファイル（src="image/pt_jirei-2_2.gif";）を表示（document)
c 名前（name=）button01にマウスがきたら（onmouseover=）、関数（button1_2）を実行、
マウスが外れたら（onmouseout=）、関数（button1_1）を実行する。