Trying to find image position in IE.

[Paul]

Hi,

I'm trying to find the left and top position of an image in MSIE. In
HTML the image is

<img border=0 src="image.png" id="myimage" style="position:relative;" /
The javascript is

///////
var myvar;
var xpos;
document.onmousemove = getCoordinate;
function getCoordinate(e) {
myvar = document.getElementById('myimage');
xpos = myvar.style.left;
displayvar(xpos); // function to display a value
}
///////

The myvar.style.left is empty. Also I've tried

xpos = myvar.style.pixelLeft

which is always set to zero regardless of the images left position.

Any ideas how to read the x,y position of an image? The above works if
the html style tag in the img tag is

style="position:relative; left:400px"

So the javascript reads the left position as 400, but I don't want to
manually fix the position of the image.


Any help is greatly appreciated.
Paul

 

[Joost Diepenmaat]

Any ideas how to read the x,y position of an image?

Take a look at the "offset" section of this page:

http://www.quirksmode.org/dom/getstyles.html

 

[Paul]

Take a look at the "offset" section of this page:

http://www.quirksmode.org/dom/getstyles.html

That worked. Thanks, you're a life saver! The new code is

xpos = myvar.offsetLeft

I guess it's not part of the "style" since it is not xpos =
myvar.style.offsetLeft. Also note that if the image is inside say a
"div" then the offsetLeft is *relative* to the div, so in that case
one would read the offsetLeft of the "div."

Regards,
Paul

 

[Paul]

That worked. Thanks, you're a life saver! The new code is

xpos = myvar.offsetLeft

I guess it's not part of the "style" since it is not xpos =
myvar.style.offsetLeft. Also note that if the image is inside say a
"div" then the offsetLeft is *relative* to the div, so in that case
one would read the offsetLeft of the "div."

Regards,
Paul

Here's some that will find the left position of an image regardless,
at least on MSIE7, not sure about other browser. Again it uses
offsetLeft, but it drills down to each parent summing up the offsets.

myObj = document.getElementById('myImgID');
ImgXPos = calcLeftPosition(bla1);
function calcLeftPosition(obj) {
var curleft = 0;
if(obj.offsetParent) {
while(1) {
curleft+=obj.offsetLeft;
if(!obj.offsetParent) {
break;
}
obj=obj.offsetParent;
}
} else if(obj.x) {
curleft+=obj.x;
}
return curleft
}


And for the top position,

function calcTopPosition(obj){
var curtop = 0;
if (obj.offsetParent) {
while (1) {
curtop+=obj.offsetTop;
if (!obj.offsetParent) {
break;
}
obj=obj.offsetParent;
}
} else if (obj.y) {
curtop+=obj.y;
}
return curtop;
}

Regards,
Paul

 

[Gregor Kofler]

Paul meinte:

Here's some that will find the left position of an image regardless,
at least on MSIE7, not sure about other browser. Again it uses
offsetLeft, but it drills down to each parent summing up the offsets.

[snip]

It works in all(?) current browsers, too. However it's a bit clumsy:

function getAbsPos(elem) {
var pos = {x: 0, y: 0};
while((elem = elem.offsetParent)) {
pos.x += elem.offsetLeft;
pos.y += elem.offsetTop;
}
return pos;
}

does both coordinates with half the LOC.

scrollTop and scrollLeft of containers might be an issue though.

Gregor

 

[Paul]

Paul meinte:

Here's some that will find the left position of an image regardless,
at least on MSIE7, not sure about other browser. Again it uses
offsetLeft, but it drills down to each parent summing up the offsets.

[snip]

It works in all(?) current browsers, too. However it's a bit clumsy:

function getAbsPos(elem) {
var pos = {x: 0, y: 0};
while((elem = elem.offsetParent)) {
pos.x += elem.offsetLeft;
pos.y += elem.offsetTop;
}
return pos;

}

does both coordinates with half the LOC.

scrollTop and scrollLeft of containers might be an issue though.

Gregor

Thanks. You're correct, that code was very sloppy. I merely grabbed
the code from a forum and added the tabbed indenting.

Although there's one thing missing in the code.

Instead of,

var pos = {x: 0, y: 0};

it should be,

var pos = {x: elem.offsetLeft, y: elem.offsetTop};

Otherwise it will miss one element.

Regards,
Paul

 

[Gregor Kofler]

Paul meinte:

[snip]

Although there's one thing missing in the code.

Instead of,

var pos = {x: 0, y: 0};

it should be,

var pos = {x: elem.offsetLeft, y: elem.offsetTop};

You're right, my bad. It was sloppy cut and paste from my library, where
it is

var pos = new Coord(elem.offsetLeft, elem.offsetTop);

Gregor

 

[dhtml]

On Jul 15, 10:11 am, Gregor Kofler <[email protected]> wrote:

Although there's one thing missing in the code.

What about the border-widths of the offsetParents?

What are offsetTop and offsetParent?