Return to tutorial on Moving image across screen

JavaScript

<script language='JavaScript' type='text/JavaScript'>
<!--
var dir_h='right';
var dir_v='down';
function reset1(){
clearTimeout(my_time);
document.getElementById('i1').style.left= "500px";
document.getElementById('i1').style.top= "100px";
document.getElementById("msg").innerHTML="";
}

function disp(){
var step=2; // to  Change speed change this step value
//alert(dir);

var y=document.getElementById('i1').offsetTop;
var x=document.getElementById('i1').offsetLeft;
if(x >= 900 ){
dir_h = 'left';
}
if(x <= 400 ){
dir_h = 'right';
}
if(dir_h=='right'){x= x +step;}
else{x=x - step;}

if(y >= 500 ){
dir_v = 'up';
}
if(y <= 100 ){
dir_v = 'down';
}

if(dir_v=='down'){y= y +step;}
else{y=y - step;}

document.getElementById('i1').style.top= y + "px"; // vertical movment
document.getElementById('i1').style.left= x + "px"; // horizontal  movment

//////////////////////
}

function timer(){
disp();
var y=document.getElementById('i1').offsetTop;
var x=document.getElementById('i1').offsetLeft;
document.getElementById("msg").innerHTML="X: " + x  + " Y : " + y
my_time=setTimeout('timer()',10);
}


//-->
</script>

HTML

<img src=images/help.jpg id='i1' style="position:absolute; left: 400; top: 100;">
<br><br><br><br>
<input type=button onClick=timer() value='Start'>
<input type=button onClick=reset1() value='Reset'>
<div id='msg'></div>