画像を変更しちゃいま〜す.

Index

このプログラムは,プッシュボタンを押すことによって画像を変更するものです.

【例】

	<SCRIPT LANGUAGE="JavaScript">
	<!--
	var cnt=0;
	function ChngPicture( add ){
		cnt += add;				// cntの値は>ボタンが押されると+1,<ボタンが押されると-1
		cnt = ( cnt < 0 ) ? 7 : cnt;		// cntが0より小なら cnt = 7
		cnt = ( cnt > 7 ) ? 0 : cnt;		// cntが7より大なら cnt = 0
		document.ChngPic.src = "../img/btn" + cnt + "0.gif";	//(1)	
	}
	//-->
	</SCRIPT>
	
	<FORM>
	<IMG SRC="../img/btn00.gif" NAME="ChngPic"><P>	//(2)
	<input type=button onclick="ChngPicture(1)" value=" < ">	//(3)
	<input type=button onclick="ChngPicture(-1)" value=" > ">
	</FORM>

【解説】

(1)Chngpicという名のオブジェクトのsrcプロパティを設定することにより画像が変更されます.
(2)オブジェクトをChngpicという名前に設定します.
(3)プッシュボタンを押すことにより,ChngPicture()が呼び出され,画像が変化します.

画像ファイルの名前を img0.gif ,img1.gif , img2.gif ...の用にしておくとプログラムで扱いやすくなります.

異なるサイズの画像への変更は,IE4.0は可能ですが,Netscape4.0は最初の画像サイズに変更されてしまいます.

【実行してみよう】


1998(C) Motonari Morikawa