Image Position by style.top & style.left

Image style left and style top 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

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    More on JavaScript Image Object
    Image SlideShow Script using navigational buttons
    Image Loading to cache while page load by Image object
    Reloading the image without refreshing the page
    Image Rotator Script for automatic Slideshow
    Image Move across by button click
    Image Move continuously across screen
    Image offSetLeft and offSetTop to get position of the image from left and top
    Image Position : Positioning an image by assigning value to style.top and style.left
    Image width: Managing width of the image
    Image height: managing height of the image
    Image align: Image align left or right
    Image border: adding and removing border from Image
    Image 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.

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer