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.
<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
krati jain | 24-10-2014 |
I feel this is a good effort krati jain |
vitthal chandane | 09-04-2015 |
i fill that it is nice solution which i help to solve my problem. |