absolute x,y coordinates of an image?

[laredotornado]

Hello,
Is it possible to find out the absolute coordinates of the upper
left corner of an image on my html page? I need to use javascript to
overlay something next to it exactly 50 pixels to the right of it.

Much thanks for your help, - Dave

 

[michael elias]

Sure:

function measureLeft(oElement){
var iLeft = oElement.offsetLeft;
var oParent = oElement.offsetParent;
while(oParent.nodeName != 'BODY'){
iLeft += oParent.offsetLeft;
oParent = oParent.offsetParent;
}
return iLeft;
}

function measureTop(oElement){
var iTop = oElement.offsetTop;
var oParent = oElement.offsetParent;
while(oParent.nodeName != 'BODY'){
iTop += oParent.offsetTop;
oParent = oParent.offsetParent;
}
return iTop;
}

 

[Matt Kruse]

Note that the code below may fail under various conditions, such as IE
running in strict mode, or if there are scrollable elements such as DIVs
within the page.

See http://www.mattkruse.com/javascript/ObjectPositionTest.php for my
attempt at a more generalized position-finding function. It's not complete
yet, but is more reliable than the method used by most (like the one below).

Sure:

function measureLeft(oElement){
var iLeft = oElement.offsetLeft;
var oParent = oElement.offsetParent;
while(oParent.nodeName != 'BODY'){
iLeft += oParent.offsetLeft;
oParent = oParent.offsetParent;
}
return iLeft;
}

function measureTop(oElement){
var iTop = oElement.offsetTop;
var oParent = oElement.offsetParent;
while(oParent.nodeName != 'BODY'){
iTop += oParent.offsetTop;
oParent = oParent.offsetParent;
}
return iTop;
}

(top-posted for easier reading)

 

[Gérard Talbot]

michael elias a écrit :

Sure:

function measureLeft(oElement){
var iLeft = oElement.offsetLeft;
var oParent = oElement.offsetParent;
while(oParent.nodeName != 'BODY'){
iLeft += oParent.offsetLeft;
oParent = oParent.offsetParent;
}
return iLeft;
}

function measureTop(oElement){
var iTop = oElement.offsetTop;
var oParent = oElement.offsetParent;
while(oParent.nodeName != 'BODY'){
iTop += oParent.offsetTop;
oParent = oParent.offsetParent;
}
return iTop;
}

This won't work in MSIE 6 if the image is absolutely positioned.

Gérard

 

[RobG]

Hello,
Is it possible to find out the absolute coordinates of the upper
left corner of an image on my html page? I need to use javascript to
overlay something next to it exactly 50 pixels to the right of it.

Much thanks for your help, - Dave

Everything you need is here:

<URL:http://www.quirksmode.org/js/findpos.html>

 

[Evertjan.]

RobG wrote on 08 okt 2005 in comp.lang.javascript:

Everything you need is here:

<URL:http://www.quirksmode.org/js/findpos.html>

All you need is love?

 

[laredotornado]

Sadly, this doesn't work for me on IE 6.0 (Win 2000). IE always
returns 0 when I call findPosX(document.getElementById('navImg'));

Is my HTML formatted incorrectly?

<tr>
<td><img id="navImg" name="navImg" src="images/NAV_07.gif" alt=""
border="0"></td>

<td>

Andt he JS is use is

function calculateLeftCoords() {
leftPos = findPosX(document.getElementById('navImg')) + 45;

Any help is appreciated, - Dave