Return to tutorial on Moving image across screen

JavaScript

<script language='JavaScript' type='text/JavaScript'>
<!--
//w=screen.availWidth-220 //1280
//h=screen.availHeight-220 //720
w=screen.width-220 //1280
h=screen.height-220 // Adjust the edges by changing va
//document.write( w, h )
function reset1(){
clearTimeout(my_time);
document.getElementById("msg").innerHTML="";
}

function reset(){
document.getElementById('i1').style.left= "10px";
document.getElementById('i1').style.top= "10px";
document.getElementById("msg").innerHTML="";
timer()
}

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 <= w && x>=10 && y==10 ){
x = x+ step;  // Move right 
}

if(x >= w && y>=10 && y <=h){
y=y + step;  // Move down 
}
if(x <= w && x>=10 && y >=h){
x=x - step; // Move Left 
}

if(x == 10 && y>=10 && y<=h  ){
y = y- step; //Move Up
}

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: 10; top: 10;">
<br><br><br><br>
<input type=button onClick=reset() value='Start'>
<input type=button onClick=reset1() value='Stop'>
<div id='msg'></div>