ボタンクリックで画像を順番に入れ替え２
原案：平井 公大 氏 （2000/02/05 登録）
ボタンをクリックするたびに次の画像を表示します。IE4.0以降だとエフェクトをかけて表示します。以前の画像の入れ替えサンプルと違うところは、あらかじめ画像を先読みしておいて、画像を入れ替えたときにその画像の本来のサイズにリサイズしていることです。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>ボタンクリックで画像を順番に入れ替え２</title>
<script type="text/javascript">
<!--
var n = 0;
var m = 3; // 画像の数
var img = new Array(3);
img[0]=new Image(); img[0].src="byrgald3.jpg";
img[1]=new Image(); img[1].src="b_yhake3.jpg";
img[2]=new Image(); img[2].src="b_ygald4.jpg";
function chgimg() {
if( n == img.length-1 ) n = 0; else n++;
document.topimg.src= img[n].src;
document.topimg.width = img[n].width;
document.topimg.height = img[n].height;
if (document.all) {
el=document.all('topimg');
el.style.visibility = "hidden";
setTimeout("trans()",100);
}
}
function trans() {
el=document.all('topimg');
el.filters["revealTrans"].transition=12;
el.filters["revealTrans"].Apply();
el.style.visibility = "visible";
el.filters["revealTrans"].Play();
}
function init() {
setTimeout("trans()",100);
}
if (document.all) window.onload=init;
// -->
</script>
</head>
<body>
<div style="text-align:center;">
<img src="byrgald3.jpg" name="topimg" width="315" height="236" alt="トップイメージ"
style="visibility:hidden; filter:revealTrans(Duration=1.8, Transition=12)">
</div>
<div style="text-align:center;">
<hr>
<form>
<input name="button" type="button" onClick="chgimg()" value="変更">
</form>
</div>
<script type="text/javascript">
<!--
init();
// -->
</script>
</body>
</html>
