JavaScript move image

This page discusses - JavaScript move image

JavaScript move image


This section illustrates you how to move an image on the window using JavaScript.

In the following code, we have defined an image 'node.jpg' in order to move it on the browser. For this, we have used onClick event handler to specify what should happen when the mouse is clicked on the window. The properties clientX and clientY of event object indicates the cursor's horizontal and vertical position when the event occurs relative to the upper-left corner of the window and the pageX and pageY provide coordinates in the document's space. To set the element top position relative to the next element top edge we have used the property style.left and the syle.left sets the position of the left edge of an element relative to the left edge of the next element. This code works correctly on Internet Explorer.

Here is the code:

<h2>Move Image</h2>
<script type="text/javascript">
var X, Y;
function moveImage(){
X = (document.layers) ? e.pageX : event.clientX
Y = (document.layers) ? e.pageY : event.clientY
<img id="image" src="node.jpg"></img>

Output will be displayed as:

If you click anywhere on the window the image will moved to that position.

Download Source Code:


Share on Google+Share on Google+

JavaScript move image

Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: JavaScript move image  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
January 3, 2012

very Good
February 18, 2012
Your Script

You post the following line: "<img id="image" src="node.jpg"></img>" Do you not know that <img... - tags are not getting a close tag </img>? <img ... tags will be closed by <img........../>
July 8, 2012
Advance java

How move the images in the java script
Najam farooq
November 14, 2012
move imge

plese give me codind for move imge.