Image position movement by style.top and style.left value in JavaScript

We can assign coordinates to position an image by changing its style.left and style.top property value in JavaScript. We can keep changing these values to move the image to different location. Here is the code to set these values.

document.getElementById('i1').style.left="200px";
document.getElementById('i1').style.top="100px";

By using above concepts we will try to change position of an image by moving it from left to right , top to down and vice-versa.
Demo of moving image
The code is here

<html>
<head>
<title>Demo of Image position style.top and style.left </title>
<link rel="stylesheet" href="../images/all11.css" type="text/css">
<script language='JavaScript' type='text/JavaScript'>
<!--
function move_img(str) {

switch(str){
case "down":
document.getElementById('i1').style.top=600 + "px";
break;

case "up":
document.getElementById('i1').style.top=100 + "px";
break;

case "left":
document.getElementById('i1').style.left=200 + "px";
break;

case "right":
document.getElementById('i1').style.left=800 + "px";
break;

}
}
//-->
</script>
</head>
<body>
<img src=images/help.jpg id='i1' 
 style="position:absolute; left: 500; 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'>
<br><br>

</body>
</html>

Image Object offsetLeft & offsetTop of Image Movement of image by button click

vitthal chandane	09-04-2015
i fill that it is nice solution which i help to solve my problem.

krati jain	24-10-2014
I feel this is a good effort krati jain

Image Position by style.top & style.left