Reading Image Position and Screen Height/Width

[ajmsake]

How does one read the X,Y coordinates of an image and tell what the current height and width is of the browser?I'm displaying a popup which is displaying fine, but now I want to display the popup at the bottom edge of an image if there is enough space or on the top edge of the image if there isn't.Thus far I've been guessing, I'd paste code but everything I've tried so far doesn't come close.Thanks,Anthony

[jesh]

Check out the HTML DOM Image object:http://www.w3schools.com/htmldom/dom_obj_image.asp

<img src="http://w3schools.invisionzone.com/style_images/6_w3smn5.png" id="image" /><script type="text/javascript">var img = document.getElementById("image");alert("That image is " + img.width + " pixels wide by " + img.height + " pixels tall.");</script>

[ajmsake]

Check out the HTML DOM Image object:http://www.w3schools.com/htmldom/dom_obj_image.asp

<img src="http://w3schools.invisionzone.com/style_images/6_w3smn5.png" id="image" /><script type="text/javascript">var img = document.getElementById("image");alert("That image is " + img.width + " pixels wide by " + img.height + " pixels tall.");</script>

Thanks Jesh! this works great but now how do I tell where in the browser the image is located?

[jesh]

Thanks Jesh! this works great but now how do I tell where in the browser the image is located?

No problem. Finding the position is just as easy. Unfortunately how to do that is missing from the tutorials here. Try doing a Google search for "offsetLeft" and "offsetTop".

<img src="http://w3schools.invisionzone.com/style_images/6_w3smn5.png" id="image" /><script type="text/javascript">var img = document.getElementById("image");alert("That image is located at (" + img.offsetLeft + "," + img.offsetTop + ").");</script>

[aspnetguy]

is that accurate cross browser? Finding the screen dimensions and center is a bit complicated (because of IE of course).This article explains it well and provides some nice exampleshttp://www.quirksmode.org/js/findpos.html

[ajmsake]

is that accurate cross browser? Finding the screen dimensions and center is a bit complicated (because of IE of course).This article explains it well and provides some nice exampleshttp://www.quirksmode.org/js/findpos.html

Thank you!!!! Thank you!!!! Thank you!!!! exactly what I was looking for!!!!!

[jesh]

is that accurate cross browser?

Ahh, yeah. Cross-browser. I wasn't aware of the differences between Opera and Firefox for calculating the offset position of an element. I am aware, however, of the difficulty in determining the viewport dimensions of the browser window cross-browser. *mutter*Hopefully, ajm, that link aspnetguy posted answers the rest of your questions.

[aspnetguy]

here are 2 funcstions that make finding the screen size (with scroll) and center very easily and it is 100% x-browser and even knows the difference between IE strict and quirks mode.http://www.geekdaily.net/2007/07/04/javasc...-and-centering/

[ajmsake]

is that accurate cross browser? Finding the screen dimensions and center is a bit complicated (because of IE of course).This article explains it well and provides some nice exampleshttp://www.quirksmode.org/js/findpos.html

Okay this works... but unfortunately not in my case...

function getAbsPos(oId){  var o = document.getElementById(oId);  var x = 0;  var y = 0;  if (o.offsetParent)  {    x = o.offsetLeft;    y = o.offsetTop;    while (o = o.offsetParent)    {      x += parseInt(o.offsetLeft);      y += parseInt(o.offsetTop);    }  }  return [x, y];}

The pages I'm working on have tables embedded in tables layers upon layers deep... and the images i'm trying to get the X,Y position of aren't coming out right...

[jesh]

Do you have this code up online anywhere so we can see it in action?

[ajmsake]

Do you have this code up online anywhere so we can see it in action?

Unfortunately no... it's being ran on a local intranet...