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 an example.
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.
The code is here
<html>
<head>
<title>Demo of Image position style.top and style.left in JavaScript</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.
plus2net.com