プリロード

画像をプリロードするには、新規画像オブジェクトを生成し、そこに画像のURLを指定して読み込ませます。

(new Image()).src = "pic1.jpg"; (new Image()).src = "pic2.jpg";

大量の画像をプリロードする場合は、ループを利用します。

myImg = new Array(); for(i=1; i<=30; i++) { myImg[i] = "pic" + i + ".jpg"; (new Image()).src = myImg[i]; }

画像の切り替え

クリックする毎に画像を切り替えることが出来ます。

var flag=0; function changeimage() { if(flag==0){ document.getElementById("folder").src = "open.gif"; flag=1; }else{ document.getElementById("folder").src = "close.gif"; flag=0; } }

サムネール表示

Click

サムネールをクリックすると、大きな画像を表示します。
読み始めは、ダミーの透明な画像を表示します。

myImg = new Array() myImg[0] = "img/01.jpg"; myImg[1] = "img/02.jpg"; myImg[2] = "img/03.jpg"; function changeImg(i){ document.myPhoto.src = myImg[i]; } <TABLE border="0" align="center" cellspacing="1"> <TR> <TD><IMG src="img/01s.jpg" onClick="changeImg(0)"></TD> <TD><IMG src="img/02s.jpg" onClick="changeImg(1)"></TD> <TD><IMG src="img/03s.jpg" onClick="changeImg(2)"></TD> </TR> <TR> <TD colspan="3" align="center"> <IMG src="img/spacer.gif" width="200" height="225" name="myPhoto"> </TD> </TR> </TABLE>

RollOver

マウスがサムネールの上をロールオーバーした時に、大きな画像を表示します。
マウスが離れた時は、透明画像に差し替えています。

myImg = new Array() myImg[0] = "img/01.jpg"; myImg[1] = "img/02.jpg"; myImg[2] = "img/03.jpg"; function changeImg(i){ document.myPhoto.src = myImg[i]; } function rolloutImg(){ // 透明画像に差し替える document.myPhoto.src = "img/spacer.gif"; } <TABLE border="0" align="center" cellspacing="1"> <TR> <TD><IMG src="img/01s.jpg" onMouseover="changeImg(0)" onMouseOut="rolloutImg()"></TD> <TD><IMG src="img/02s.jpg" onMouseover="changeImg(1)" onMouseOut="rolloutImg()"></TD> <TD><IMG src="img/03s.jpg" onMouseover="changeImg(2)" onMouseOut="rolloutImg()"></TD> </TR> <TR> <TD colspan="3" align="center"> <IMG src="img/spacer.gif" width="200" height="225" name="myPhoto"> </TD> </TR> </TABLE>

スライドショー

画像を一定時間で差し替えることでスライドショーを実現させます。

myNum = 0; myImg = new Array() // 画像配列の作成 for(var i=0;i<=12;i++){ myImg[i] = "img/image" + i + ".jpg"; } function changeImg(){ myNum++; if(myNum >= myImg.length) { myNum = 0 } document.myImg.src = myImg[myNum]; myTimer = setTimeout("changeImg()",5000); } <IMG src="img/image0.jpg" name="myImg"><BR> <FORM name="myForm"><BR> <INPUT type="button" name="stop" value="Stop" onClick="clearTimeout(myTimer)"> </FORM>