Return to tutorial on Moving image across screen

Source Code is here

JavaScript part

<script >
<!--
msg='Ready'
var step=1; // Change this step value
var step_x=1;
var step_y=1;
var y=document.getElementById('i1').offsetTop;
var x=document.getElementById('i1').offsetLeft;
y2=document.getElementById('i2').offsetTop;
x2=document.getElementById('i2').offsetLeft;
function reset1(){
clearTimeout(my_time);
msg='Running'

}


function disp(){
//alert("Hello");
if(y < 400 && y > 90){y= y +step_y;}
else{step_y=-step_y
y= y +step_y;}

if(x < 800 && x >100 ){x= x +step_x;}
else{step_x=-step_x
x= x +step_x;}
document.getElementById('i1').style.top= y + "px"; // vertical movment
document.getElementById('i1').style.left= x + "px"; // horizontal movment
//////////////////////
disp_data()
}

////////////////////////
function move_img(str) {
var step=50; // change this to different step value
switch(str){
case "down":
y2=document.getElementById('i2').offsetTop;
y2= y2 + step;
document.getElementById('i2').style.top= y2 + "px";
break;

case "up":
y2=document.getElementById('i2').offsetTop;
y2= y2 -step;
document.getElementById('i2').style.top= y2 + "px";
break;

case "left":
x2=document.getElementById('i2').offsetLeft;
x2= x2 - step;
document.getElementById('i2').style.left= x2 + "px";
break;

case "right":
x2=document.getElementById('i2').offsetLeft;
x2= x2 + step;
document.getElementById('i2').style.left= x2 + "px";
break;
}
disp_data()
}

function disp_data(){
relx=Math.abs(x2 - x)
rely=Math.abs(y2-y)
if( relx<50 &&  rely<50  ){reset1();
msg = 'Crossed' }	
document.getElementById("msg").innerHTML="X: " + x  + " Y : " + y +"<br>"+ "x2:"+ x2 + " y2:" + y2 + "<br>Rel X :"+ relx +" Rel Y:"+rely + "<br><b> :" + msg + "</b>"

}
//////////////
disp_data() // show data 
////
function timer(){
msg='Started';	
disp();
my_time=setTimeout('timer()',10);
}
//-->
</script>

HTML

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



<img src=images/help2.jpg id='i2' style="position:absolute; left: 400; top: 100;">
<br><br><br><br>
     <input type=button onClick=move_img('up') value='Up'>
<br>
<input type=button onClick=move_img('left') value='Left'>
<input type=button onClick=move_img('right') value='right'>
<br>
     <input type=button onClick=move_img('down') value='down'>