・　・　・　・　・　・　・　・　・　・　 →前へ・ →次へ・ トップへ戻る
その3.　ちょめちょめした時に、画像を入れ替えたい！（イベントの種類）
　　　　　　　※「マウスを乗せたとき／離した時」「クリックした時」ってのが「イベント」です。

●サンプル　※クリックすると、画像が変わります。
　1. クリックした時に、・・・・・＞画像を入れ替える。（オレンジにする）
　2. マウスを乗せたら、・・・・・＞画像を入れ替える。（ブルーにする）
　3. マウスを離したら、・・・・・＞画像を入れ替える。（グリーンにする）


●ソース（スクリプト側）　<HEAD>〜</HEAD>の中に埋め込みます。 

<SCRIPT>
function imgcg(image,i_name) {
	document[i_name].src =image;
}
</SCRIPT>
	
　前に紹介したスクリプトと変わりありません。
●ソース（呼び出し側） 
1. ●「クリックした時」に呼び出す方法
<A href="XXX" onClick="imgcg('sample2.jpg','SAMPLE')">
　画像を入れ替える。
</A>

2. ●「マウスを乗せた時」に変更する方法
<A href="XXX" onMouseOver="imgcg('sample2.jpg','SAMPLE')">
　画像を入れ替える。
</A>

3. ●「マウスを離した時」に変更する方法
<A href="XXX" onMouseOut="imgcg('sample2.jpg','SAMPLE')">
　画像を入れ替える。
</A>
	
「onClick」「onMouseOver」「onMouseOut」は、イベントハンドラと呼ばれ、
これを使えば、好きなときに関数を呼び出す（画像を変更する）ことができます。
	

	
注意：標準で「クリックした時」に働く、リンク機能（hrefで
　　　指定するやつ）を停める場合は、次のおまじないを入れておきましょう。
　　　href="javascript:window.focus()"
　　　※これは、クリックした時に「このウィンドウを手前にしなさい」という
　　　　いわゆるダミープログラムです。
●ソース（画像の表示のところ） 
<IMG src="sample1.gif" name="SAMPLE">
	
　前に紹介したスクリプトと変わりありません。

・・・・・・・・・・＞もどる。