プリロード
画像をプリロードするには、新規画像オブジェクトを生成し、そこに画像のURLを指定して読み込ませます。
<![CDATA[
(new Image()).src = "pic1.jpg";
(new Image()).src = "pic2.jpg";
]]>
大量の画像をプリロードする場合は、ループを利用します。
<![CDATA[
myImg = new Array();
for(i=1; i<=30; i++) {
myImg[i] = "pic" + i + ".jpg";
(new Image()).src = myImg[i];
}
]]>
画像の切り替え
クリックする毎に画像を切り替えることが出来ます。
<![CDATA[
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
サムネールをクリックすると、大きな画像を表示します。
読み始めは、ダミーの透明な画像を表示します。
<![CDATA[
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];
}
]]>
<![CDATA[
<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
マウスがサムネールの上をロールオーバーした時に、大きな画像を表示します。
マウスが離れた時は、透明画像に差し替えています。
<![CDATA[
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";
}
]]>
<![CDATA[
<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>
]]>
スライドショー
画像を一定時間で差し替えることでスライドショーを実現させます。
<![CDATA[
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);
}
]]>
<![CDATA[
<IMG src="img/image0.jpg" name="myImg"><BR>
<FORM name="myForm"><BR>
<INPUT type="button" name="stop" value="Stop" onClick="clearTimeout(myTimer)">
</FORM>
]]>
