Question

I have an image that is encapsulated in a <a href=""><img src=""/></a>. There may be one or more div above/below this image. How do I find the top left position of this image? by top left I mean the x and y coordinate position of this image. And I want to use javascript only, no jQuery and only the simplest solution only (with the fewest number of lines). What I have in mind is the following:

topleftImgX = img.offsetTop - img.parentNode.scrollTop;
topleftImgY = img.offsetLeft = img.parentNode.scrollLeft;

is this correct? Again javascript only, no jQuery

Answer 1

The easiest way I know:

elem = document.getElementById("yourElement");//outer starts at your elem then walks out
var innerYValue = 0;
var innerXValue = 0;

while( elem != null ) {
    innerYValue += elem.offsetTop;
    innerXValue += elem.offsetLeft;
    elem = elem.offsetParent;
}

alert("x: "+innerXValue +"\ny: "+innerYValue);