Trying to find image position in IE.

P

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
 
P

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
 
P

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
 
G

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
 
P

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
 
G

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top