473,320 Members | 1,879 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Trying to find image position in IE.

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
Jul 15 '08 #1
7 3255
Paul <en*********@gmail.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/
Jul 15 '08 #2
On Jul 15, 7:49 am, Joost Diepenmaat <jo...@zeekat.nlwrote:
Paul <energymo...@gmail.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.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
Jul 15 '08 #3
On Jul 15, 9:21*am, Paul <energymo...@gmail.comwrote:
On Jul 15, 7:49 am, Joost Diepenmaat <jo...@zeekat.nlwrote:
Paul <energymo...@gmail.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.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
Jul 15 '08 #4
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

--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Jul 15 '08 #5
On Jul 15, 10:11 am, Gregor Kofler <use...@gregorkofler.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.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
Jul 15 '08 #6
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
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Jul 15 '08 #7
On Jul 15, 11:00*am, Paul <energymo...@gmail.comwrote:
On Jul 15, 10:11 am, Gregor Kofler <use...@gregorkofler.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
Jul 16 '08 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Markus Mohr | last post by:
Hi, everyone, I have a special problem: For every monitor resolution in 200 pixel steps from 800 to 1600 pixels I have an image to be shown as centered background-image. Those images all...
2
by: Tyrone Slothrop | last post by:
I am coding a site which involves uploading images. All of the PHP and display is OK but the client wants to be able to display the image thumbnail on the upload page and show the full image on...
12
by: Major Man | last post by:
Hi, I have this .jpg picture that's 700 x 200. What I wanna do is display it on a 300 x 200 window, and have it scroll left and right, back and forth. Can anyone help this newbie? TIA
2
by: Robson Carvalho Machado | last post by:
Dear friends, I'm dynamically creating a Hyperlink with spacer.gif as ImageURL that is an 1px transparent image only to determine link position, but as I create this link dynamically I could not...
25
by: Neo Geshel | last post by:
This works: <form> <asp:TextBox id="name" /> <%= name.ClientID %> </form> But this DOES NOT work: <form>
1
by: rsteph | last post by:
I've got some product information pages, with images and text, all setup within a table. I'm trying to add a small image in the upper right hand corner of the content div (where all the important...
1
by: nicky77 | last post by:
Hi, I've created a nav bar using a background image for rollover effects. Everything works as I had hoped, however, for some reason it seems that an area of whitespace (the same size of the...
16
by: Stan The Man | last post by:
I'm a CSS novice trying unsuccessfully to make three thumbnail images display horizontally instead of vertically. I suspect I'm missing something really stupid but I'll take the flak if someone...
2
by: thephatp | last post by:
I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE. I have created a sample page, and I'm...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.