プログラムのみで複雑に画像を変える方法役
クリックすると画像が次々と変わるものを作りたいのですが、
下記方法では画像の枚数が増えたり、複雑な動作を作る場合、
複雑な構造になってしまうと思うのですが、
少しでも複雑にならない方法はありますか？
フラッシュは使わずにプログラムだけで
同じ位置で画像を変えたいです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<script language="JavaScript">
<!--
var img1 = new Image(100,50);
var img2 = new Image(100,50);
var img3 = new Image(100,50);
var img1.src = "sample1.gif";
var img2.src = "sample2.gif";
var img3.src = "sample3.gif";
function mF1(){
document.images[0].src = img1.src;
setTimeout("mF2()",100);
}
function mF2(){
document.images[0].src = img2.src;
setTimeout("mF3()",100);
}
function mF2(){
document.images[0].src = img3.src;
}
//-->
</script>
</head>
<body>
<img src="omote.jpg" width="100" height="50" onclick="mF1()">
</body>
</html>
あと、document.images[0].srcを変数として格納すると動作しないのですが、
document～というのは変数にできないのでしょうか。
var dcum = document.images[0].src;
function mF1(){
dcum = img1.src;
setTimeout("mF2()",100);
}
function mF2(){
dcum = img2.src;
setTimeout("mF3()",100);
}
function mF2(){
dcum = img3.src;
}
