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.onmous emove = getCoordinate;
function getCoordinate(e ) {
myvar = document.getEle mentById('myima ge');
xpos = myvar.style.lef t;
displayvar(xpos ); // function to display a value
}
///////

The myvar.style.lef t is empty. Also I've tried

xpos = myvar.style.pix elLeft

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]

Re: Trying to find image position in IE.

Paul <energymover@gm ail.comwrites:

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

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

[Paul]

Re: Trying to find image position in IE.

On Jul 15, 7:49 am, Joost Diepenmaat <jo...@zeekat.n lwrote:

Paul <energymo...@gm ail.comwrites:

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

>
--
Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/

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

xpos = myvar.offsetLef t

I guess it's not part of the "style" since it is not xpos =
myvar.style.off setLeft. 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]

Re: Trying to find image position in IE.

On Jul 15, 9:21 am, Paul <energymo...@gm ail.comwrote:

On Jul 15, 7:49 am, Joost Diepenmaat <jo...@zeekat.n lwrote:
>

Paul <energymo...@gm ail.comwrites:

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

>

--
Joost Diepenmaat | blog:http://joost.zeekat.nl/|work:http://zeekat.nl/

>
That worked. Thanks, you're a life saver! The new code is
>
xpos = myvar.offsetLef t
>
I guess it's not part of the "style" since it is not xpos =
myvar.style.off setLeft. 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.getEle mentById('myImg ID');
ImgXPos = calcLeftPositio n(bla1);
function calcLeftPositio n(obj) {
var curleft = 0;
if(obj.offsetPa rent) {
while(1) {
curleft+=obj.of fsetLeft;
if(!obj.offsetP arent) {
break;
}
obj=obj.offsetP arent;
}
} else if(obj.x) {
curleft+=obj.x;
}
return curleft
}


And for the top position,

function calcTopPosition (obj){
var curtop = 0;
if (obj.offsetPare nt) {
while (1) {
curtop+=obj.off setTop;
if (!obj.offsetPar ent) {
break;
}
obj=obj.offsetP arent;
}
} else if (obj.y) {
curtop+=obj.y;
}
return curtop;
}

Regards,
Paul

[Gregor Kofler]

Re: Trying to find image position in IE.

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.offsetPare nt)) {
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

--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

[Paul]

Re: Trying to find image position in IE.

On Jul 15, 10:11 am, Gregor Kofler <use...@gregork ofler.atwrote:

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.offsetPare nt)) {
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]

Re: Trying to find image position in IE.

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.offs etLeft, elem.offsetTop) ;

Gregor


--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

[dhtml]

Re: Trying to find image position in IE.

On Jul 15, 11:00 am, Paul <energymo...@gm ail.comwrote:

On Jul 15, 10:11 am, Gregor Kofler <use...@gregork ofler.atwrote:

>
Although there's one thing missing in the code.

What about the border-widths of the offsetParents?

What are offsetTop and offsetParent?

Regards,
Paul