ボタンクリックで画像を順番に入れ替え
原案：平井 公大 氏 （2000/09/24 登録）
ボタンをクリックするたびに次の画像を表示します。IE4.0以降だとエフェクトをかけて表示します(^_^)。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>ボタンクリックで画像を順番に入れ替え</title>
<script type="text/javascript">
<!--
var imgnum=1;
function chgimg() {
if( imgnum>=9 ) imgnum=0; else imgnum++;
document.topimg.src= imgnum+".jpg";
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="1.jpg" name="topimg" width="159" height="178" 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>
</body>
</html>
