Image Position by style.top & style.left
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";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>
This article is written by plus2net.com team.
More on JavaScript Image Object
Image SlideShow Script using navigational buttonsImage Loading to cache while page load by Image objectReloading the image without refreshing the pageImage Rotator Script for automatic SlideshowImage Move across by button clickImage Move continuously across screenImage offSetLeft and offSetTop to get position of the image from left and topImage Position : Positioning an image by assigning value to style.top and style.leftImage width: Managing width of the image Image height: managing height of the imageImage align: Image align left or rightImage border: adding and removing border from ImageImage alt: updating or reading alt message of image
| 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. | |