Moving Image by buttons using offset

Moving Image We can move an image to different location by using buttons. The present location of the image can be collected by using offsetLeft and offsetTop values. To this value we will add a step value which sets the new position of the image. We will assign the new value to image by style property.

Moving image in UP, down, left & right direction by buttons with offsetTop offsetLeft in JavaScript


Demo of moving Image
We will use four buttons ( left, right, top , bottom ) to set the direction of movement of the image.
<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'>
On click of each button we will take the direction to a function move_img() inside JavaScript area. Based on the direction we will execute a switch() statement. Out of four directions, this switch condition will match one direction and accordingly set the new position of the image after reading the image present position. Let us see the when Up button is clicked.
case "up":
var x=document.getElementById('i1').offsetTop;
x= x -step;
document.getElementById('i1').style.top= x + "px";
break;
In above code we first read the vertical coordinate value of the image and store it in variable x. As we are moving up so we will subtract step value from x . Now we can re-position the image by updating the new style.top value.

Moving Down

Moving down the image In the above code we need to change only the x value by adding the step value to it.
x=x+step;
Here is the complete code.
<html>
<head>
<title>Demo of changing position of an Image in JavaScript</title>
<script language='JavaScript' type='text/JavaScript'>
<!--
function move_img(str) {
var step=50; // change this to different step value
switch(str){
case "down":
var x=document.getElementById('i1').offsetTop;
x= x + step;
document.getElementById('i1').style.top= x + "px";
break;

case "up":
var x=document.getElementById('i1').offsetTop;
x= x -step;
document.getElementById('i1').style.top= x + "px";
break;

case "left":
var y=document.getElementById('i1').offsetLeft;
y= y - step;
document.getElementById('i1').style.left= y + "px";
break;

case "right":
var y=document.getElementById('i1').offsetLeft;
y= y + step;
document.getElementById('i1').style.left= y + "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> Return to <a href=image-move.php>image move tutorial</a>
</body>
</html>
The above code moves the image in steps, we can further improve the script to give continues movement to the image. It is like dropping the image from a height. We will learn in part II of moving image.
Image Object Continuous movement of image Two Image crossing Moving Images in four sides of browser
Subscribe to our YouTube Channel here


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

    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-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer