<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Animation</title>
</head>
<script language="javascript">
var ball = new Array(4);
var curPos = 0;
var startRolling;
// assigning ball0.png to ball[0], ball1.png to ball[1], etc
for (i=0; i < ball.length; i++) {
ball[i] = "ball"+i+".png";
}
var movement = 20;
function roll() {
if (curPos == (ball.length-1)){
curPos = 0;
} else {
curPos++;
}
// change image source to the current image, e.g. ball[2].png
document.animatedBall.src = ball[curPos];
var ballLeft = parseInt(document.animatedBall.style.left);
ballLeft = ballLeft+movement;
document.animatedBall.style.left=ballLeft+"px";
if (ballLeft >=400) {
movement = -20;
}
if (ballLeft < 0) {
movement = 20;
}
}
</script>
</head>
<body>
<img src="ball0.png" name="animatedBall" style="position:absolute;left:0px;">
<form style="position:absolute; top:200px;">
<input type="button" name="run" value="Roll"
onClick="startRolling=setInterval('roll(parseInt(document.animatedBall.style.left))',60);">
<input type="button" name="stop" value="Stop Rolling"
onClick="clearInterval(startRolling);">
</form>
</body>
</html>