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";
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
Image SlideShow Script using navigational buttons