Skip to main content

Moving (Positioning) an Image Using JavaScript

Screenshot

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 have position: 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.

Misc.

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:

document.getElementById(<ID>).style.<STYLE-NAME>

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';

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript: Moving an Image</title>
<script type="application/ecmascript">

// --CHANGE THESE IF REQUIRED--
// Initial x-position of image
var x = 200;
// Initial y-position of image
var y =100;
// Pixels to move in each step
var inc = 10;

function Init()
{
   document.getElementById('img1').style.left = x + 'px';
   document.getElementById('img1').style.top = y + 'px';
}
function moveRight()
{
   x += inc;

   document.getElementById('img1').style.left = x + 'px';
}

function moveLeft()
{
   x -= inc;

   document.getElementById('img1').style.left = x + 'px';
}

function moveUp()
{
   y -= inc;

   document.getElementById('img1').style.top = y + 'px';
}

function moveDown()
{
   y += inc;

   document.getElementById('img1').style.top = y + 'px';
}
</script>


<style>
#box
{
   width: 500px;
   height: 300px;
   position: relative;
   margin: 20px auto 0px auto;
   border: 5px outset #000;
   overflow: hidden;
}

.image
{
   position: absolute;
   z-index: 100;
}
</style>
</head>

<body onload="javascript:Init()">
<div id="box"><img class="image" id="img1" src="ball.png"/></div>
<a href="javascript:moveLeft()">Left</a>
<a href="javascript:moveUp()">Up</a>
<a href="javascript:moveDown()">Down</a>
<a href="javascript:moveRight()">Right</a>
</body>
</html>

NOTE: An image with name "ball.png" must be there in the same directory as this file for the above ocde to work "as-is".

Related Posts:

Popular posts from this blog

Fix For Toshiba Satellite "RTC Battery is Low" Error (with Pictures)

RTC Battery is Low Error on a Toshiba Satellite laptop "RTC Battery is Low..." An error message flashing while you try to boot your laptop is enough to panic many people. But worry not! "RTC Battery" stands for Real-Time Clock battery which almost all laptops and PCs have on their motherboard to power the clock and sometimes to also keep the CMOS settings from getting erased while the system is switched off.  It is not uncommon for these batteries to last for years before requiring a replacement as the clock consumes very less power. And contrary to what some people tell you - they are not rechargeable or getting charged while your computer or laptop is running. In this article, we'll learn everything about RTC batteries and how to fix the error on your Toshiba Satellite laptop. What is an RTC Battery? RTC or CMOS batteries are small coin-shaped lithium batteries with a 3-volts output. Most laptops use

The Best Way(s) to Comment out PHP/HTML Code

PHP supports various styles of comments. Please check the following example: <?php // Single line comment code (); # Single line Comment code2 (); /* Multi Line comment code(); The code inside doesn't run */ // /* This doesn NOT start a multi-line comment block /* Multi line comment block The following line still ends the multi-line comment block //*/ The " # " comment style, though, is rarely used. Do note, in the example, that anything (even a multi-block comment /* ) after a " // " or " # " is a comment, and /* */ around any single-line comment overrides it. This information will come in handy when we learn about some neat tricks next. Comment out PHP Code Blocks Check the following code <?php //* Toggle line if ( 1 ) {      // } else {      // } //*/ //* Toggle line if ( 2 ) {      // } else {      // } //*/ Now see how easy it is to toggle a part of PHP code by just removing or adding a single " / " from th

Designing a Simple Order Form Application in PHP

Ok guys, for this post we’re going to create a simple yet complete order form page. Order forms are used on many sites to take customers order online. Order forms should have the capability to take orders from visitors regarding what items they want to purchase and store the information for further processing. For this post’s example, we are going to create an order form for a Book Seller. The form will be designed to take order of five different items (books). Our order form application should be able to take order of five different items in any separate quantities tht user wants, it should also ask for shipping address and name of the customer. It should then store the information provided in a file along with the date and time order was placed. The application should also be able to take any number of orders and store them all linearly for further human processing. For this, we need a front end of a HTML form to which the user would interact a