Image offsetLeft & offsetTop

Image offsetLeft & offsetTop We can get the position of an image by reading its offset values. We will get two positions one is offsetLeft and other one is offsetTop.
offsetLeft give us distance of the image from left edge of the screen. Same way offsetTop give us the distance of the image from top edge of the screen. We will use getElementById to get the positions by using image id .
  • Image Object & its Properties

Here is the code.
In the above code i1 is the id of the image. Read more on Image object and its properties
<img src=top2.jpg id=i1>
Demo of Image offset
To read out value of offsetTop and offsetLeft we will use one Div layer and display the values inside it. Here is the code.
<title>Demo of Image offset in JavaScript</title>
<script language='JavaScript' type='text/JavaScript'>
function disp_img(str) {

var x=document.getElementById('i1').offsetLeft;
var y=document.getElementById('i1').offsetTop;
document.getElementById("msg").innerHTML="X: " + x  + " Y : " + y

<body >

<img src=images/help.jpg id='i1' style="position:absolute; left: 500; top: 100;">
<br><br><input type=button onClick=disp_img() value='Show Details'>
<div id='msg'></div>

Image Object Image Border

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
krati jain


I feel this is a good effort
krati jain
vitthal chandane


i fill that it is nice solution which i help to solve my problem.

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