JavaScript : Positioning (Moving) an Image


In this post we’re going to learn how we can move an image around using JavaScript. We’ll have four control links (Left, Right, Up, Down) that’ll move the image.

Reading along you’ll learn:

  1. What the absolute and relative positions do
  2. How some JavaScript function can be invoked automatically on page load
  3. How JavaScript can be used to manipulate the “style” properties of elements
  4. How JavaScript can be used to change these properties

Okay, now let’s start!

Theory : 

We’re going to have the following elements in the page:

  1. A container (div)
  2. An image
  3. Control links

Container :

The container would be styled to have a size of 500px by 300px. It’d haveposition: relative which makes anything inside to be positioned with respect to this container. It’s done to make the image move independent of the placement of the container. We’ll also make the overflows from the container to be “hidden”.

Image :

The image would be given position: absolute which means it can be positioned with absolute (left (x), top (y)) values. Normally images (like other elements) are positioned, aligned, wrapped accordingly with other elements. The absolute position however, gives us the power to place the image (or other element) freely.

Control Links :

Control Links  will be used to invoke the functions to move the image in the respective directions.

Mise :

The functions being called by the Control links will manipulate the position of the image using one document.getElementbyId() function.

This function is used to reference elements in the document uniquely by using their IDs (which are supposed to be unique for each element). The style properties of elements are referenced as:


We’ll be using the onload event of the body element to invoke the Init()function initially on page load.

<body onload="javascript:Init()">

Working : 

When the page loads, the function Init() is getting called which sets the initial position of the image.

When a control link is clicked, the respective coordinate (x or y) is modified and the new value is set in the following line:

document.getElementById(‘img1’).style.left = x + ‘px’;

document.getElementById(‘img1’).style.top = y + ‘px’;

Coding :


Download : CodingTalks – Moving an Image

You Need "JavaScript : Positioning (Moving) an Image" ???

"JavaScript : Positioning (Moving) an Image" (Source Code / Report / PPT) Totally belong to CodingTalks Team and We always ready to Share our Stuff with our users. If you are Very Much Interested on This Topic Then you must Leave a Comment what Exactly you Looking For Or Send us Email to get Full Information.

Coding Talks

Filed in: HTML, Java Tags: , , , , , , ,

Get Updates

Share This Post

Related Posts

Leave a Reply

Submit Comment

© 5797 CodingTalks. All rights reserved.

Warning: filemtime(): stat failed for /home/codingtalks/public_html/wp-content/plugins/floating-social-share-bar//js/waypoints.min.js in /home/codingtalks/public_html/wp-content/plugins/floating-social-share-bar/floatingshare.php on line 213