Continuous movement of image in screen

Moving Image We have seen how to move image in the screen , we will extend the same technique to move image continuously vertically from top to bottom and then horizontally from left to right.

Moving image continuously on screen using JavaScript Timer and image style left and top properties

Use of timer

To give continues move command we have used timer using setTimeout function. The same timer get reset by using clearTimeout function. Each reset will position the image at fixed location. For this we have used a function reset1()
Demo of moving image across screen
Here is the complete code of the above demo
More demo at the end of the page
<title>Demo of Image moving across screen in JavaScript</title>
<script >
function reset1(){
document.getElementById('i1').style.left= "500px";
document.getElementById('i1') "100px";

function disp(){
var step=1; // Change this step value
var y=document.getElementById('i1').offsetTop;
var x=document.getElementById('i1').offsetLeft;
document.getElementById("msg").innerHTML="X: " + x  + " Y : " + y
if(y < 400 ){y= y +step;
document.getElementById('i1') y + "px"; // vertical movment
if(x < 800){x= x +step;
document.getElementById('i1').style.left= x + "px";//horizontal move

function timer(){
<body >
<img src=images/help.jpg id='i1' 
  style="position:absolute; left: 500; top: 100;">
<input type=button onClick=timer() value='Start'>
<input type=button onClick=reset1() value='Reset'>
<div id='msg'></div>


Feel free to ask for further clarification or if you have any specific questions about moving images in JavaScript!
Image Object Movement of image by button click
Subscribe to our YouTube Channel here


* indicates required
Subscribe to plus2net

    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 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
    aza said


    pls help me to make an image to move from left to right using javascript


    I pasted the above entire code and tried using it with teacher's car. Does the size of the object matter? What's the largest object size I can use?


    Could you please add circle movement of image. For example shark is rotating the boat.


    Is it possible to move an object according to certain rules, parallel to line or in given distance from circle or whatever custom line
    Thank you in advance


    By adjusting X , Y values we can move the image in any direction. We can apply math formula to work out different X , Y values to move the image in an circle.

    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 All rights reserved worldwide Privacy Policy Disclaimer