How do I determine X, Y of image ? 1

capitano · Oct 12, 2002

I'm trying to use Javascript to determine the X and Y location (pixels) on an image on a web page. I want to be able to layer additional images over the main image, but the location of the main image might change from page to page.

Is there some Javascript which will find this X,Y for me everytime the page loads?

object.xlocation ???
object.ylocation ???

See what I mean? I don't know how to do this.
Thanks for any help.

xutopia · Oct 12, 2002

why do you want to do this? Gary

http://www.xutopia.com

Haran

starway · Oct 13, 2002

As far as I understand, all what you need is good old image rollover script: swap one image to another one when needed, instead of some DHTML games to place a layer over an image.

wray · Oct 13, 2002

Internet Explorer exposes

Code:

offsetLeft

and

Code:

offsetTop

as properties of an element's

Code:

style

object. I don't recall the details but you can ask IE --

Code:

onmouseover=&quot;alert('Left is '+this.style.offsetLeft);&quot;

Seems like the response was relative to the containing object. If so the

Code:

offsetParent

property may be useful in establishing an absolute x,y.

capitano · Oct 13, 2002

xutopia, are you serious when you say 'why do you want to do this?' Pretty sure I mentioned it.

*The main image will change locations from page to page.* Translation: in order to layer things over the main image, I'll need to know the x,y coordinates. -- since they're constantly changing and layering (at least in IE) requires using stylesheets to exactly position an object.

starway, I have 21 layers of a geographical region map. On any given web page, I need to *DYNAMICALLLY* highlight a random number of these. So, region 3,5,9,10,13,19 might all be highlighted simultaneously on ONE PAGE. (By dynamically, I mean this will be a database driven site. The highlighted regions will correspond to some user selection earlier in the process after a user has answered some questions on a form.)

ON THE NEXT PAGE, regions 9,10,11,12,13,17,18,21 might all be highlighted.

ON THE NEXT PAGE, region 6 might be highlighted.

starway, I don't see how a rollover will do this. However, multiple layers with background-color: transparent; will accomplish this task nicely.

The problem is that, as I mentioned above, in order to use stylesheets to exactly position all the layers, I need to have an X,Y coordinate.

And so the question: how to find an X,Y of an object.

I've tried `document.image.x` and `document.image.y` but I get an `undefined` whenever I try this.

Thanks for any help on x,y or any constructive help on other ways to accomplish the same task.

capitano · Oct 13, 2002

wray, thank you. That seems like it should work. I just tried it, but I'm getting:
"Left is undefined"

I'm using IE 6.0. Could this be part of the problem?
Thanks,
Bryan

wray · Oct 13, 2002

Left should be in quotes.

Code:

Left

is undefined, 'Left is' is text.

capitano · Oct 13, 2002

Yes, but if +this.style.offsetLeft evaluates to `undefined`,
the the alert message evaluates to:

"Left is "+ `undefined`

Whis is:

"Left is undefined"

xutopia · Oct 13, 2002

capitano,

I understood that you wanted to overlap an image with another one. My question was why did you want to overlap an image with another!

So I guess I really was serious when I asked although I should of specified.

The offsetLeft didn't work because it isn't a child of style but a child of the object itself.

http://www.mozilla.org/docs/dom/domref/dom_el_ref19.html#1028018

<a href="#" onclick="alert(this.offsetLeft);return false">get offset of this link</a>

I hope this helps. Gary

http://www.xutopia.com

Haran

wray · Oct 13, 2002

Code:

offsetLeft

and

Code:

offsetTop

are indeed properties of the

Code:

element

object, not the

Code:

style

object. That they are specified in the Gecko DOM is news to me, good news too.

My original response (before editting) referenced

Code:

pixelLeft

and

Code:

pixelTop

, properties of the

Code:

style

object. If

Code:

offsetLeft

and

Code:

offsetTop

don't work for you take a look here. These properties are IE-specific.

sjnarkis · Oct 13, 2002

Sorry if this rehashes some of the previous. I just gave this problem as homework to my web class.

1. If you declare an id for the image in the html, you can get the location of it anytime later via that id.

<img src="whatever" id="my_name">

2. In a script in that window you can reference:
my_name.style.posTop for "my_name" element's top edge
my_name.style.posLeft for "my_name" element's left edge

to get the top,left corner relative to (0,0) of the window.

3. ".style.posTop" and ".style.posLeft" return integers
4. ".style.top" and ".style.left" return strings

use the appropriate property

5. Give the images unique id's and you can keep track of them all. Move them however, wherever you like.

Hope this adds something to the discussion.

SJN

xutopia · Oct 14, 2002

sjnarkis,

Sure posLeft returns an integer but is it understood by most browsers or just IE?

Just what is it that you teach? What is your college? Gary

http://www.xutopia.com

Haran

sundemon · Oct 14, 2002

hi capitano,
The script below exposes the x/y coordinates of an HTML (vs. CSS) positioned image (named "testImage.gif&quot

for NS and IE from version 4. In this case the image is centered in a table. The image is conditionally nested in an <A> tag to accomodate the "onclick" event handler in NS4:

<html>
<head>
<script language="javascript">
d=document;
ID=(d.getElementById)?1:0;
ALL=(d.all)?1:0;
NS4=(d.layers)?1:0;
function showCoords(obj){
var x,y;
if(NS4){
x=obj.x;
y=obj.y;
}
if(ID||ALL){
x=obj.offsetLeft;
y=obj.offsetTop;
}
alert(x+'\n'+y);
}
</script>
</head>
<body>
<table width=100% height=100% border=0>
<tr>
<td align=center valign=middle>
<script language="javascript">
if(NS4){
d.write('<a onclick="showCoords(this);">');
}
</script>
<img src="testImage.gif" width=178 height=106 name="testImage" border=0 onclick="showCoords(this);">
<script language="javascript">
if(NS4){
d.write('</a>');
}
</script>
</td>
</tr>
</table>
</body>
</html>

The next script does the same for CSS positioned images, in this case contained in a DIV tag, again for NS4:

<html>
<head>
<style type="text/css">
#image{position:absolute;left:100;top:75;}
</style>
<script language="javascript">
d=document;
ID=(d.getElementById)?1:0;
ALL=(d.all)?1:0;
IE5=(ID&&ALL)?1:0;
NS6=(ID&!ALL)?1:0;
NS4=(d.layers)?1:0;
function showCoords2(objID){
var xName,yName,obj;
if(NS4){
xName="left";
yName="top";
obj=d.image;
}
if(IE5||ALL){
xName="pixelLeft";
yName="pixelTop";
obj=image.style;
}
if(NS6){
xName="offsetLeft";
yName="offsetTop";
obj=d.getElementById("image&quot

;
}
alert(obj[xName]+"\n"+obj[yName])
}
</script>
</head>
<body>
<div id="image">
<a href="#" onclick="showCoords2();">
<img src="testImage.gif" name="testImage" border=0>
</a>
</div>
</body>
</html>

sundemon · Oct 14, 2002

sorry, I see I left "objID" as a parameter in the "showCoords2" function of the second script...
That was left over from another idea. As you can see, it does nothing, ignore or delete it

duh...

sundemon · Oct 15, 2002

there is an error in the NS4 section of the first (HTML) script above. I forgot the 'href="#"', so it didn't work.
strangely, when i corrected that, it showed the x/y position plus the width or height of the image, which in this case happened to be 178x106. In other words, it was showing the x/y point of the lower right corner of the image. To get the correct x/y, I had to subtract width and height.
anybody know why?
anyway, here's a revised version of the first script:

<html>
<head>
<script language="javascript">
d=document;
ID=(d.getElementById)?1:0;
ALL=(d.all)?1:0;
NS4=(d.layers)?1:0;
function showCoords(obj){
var x,y;
if(NS4){
x=d.testImage.x;
y=d.testImage.y;
}
if(ID||ALL){
x=obj.offsetLeft;
y=obj.offsetTop;
}
alert(x+'\n'+y);
}
</script>
</head>
<body>
<table width=100% height=100% border=0>
<tr>
<td align=center valign=middle>
<script language="javascript">
if(NS4){
d.write('<a href="#" onclick="showCoords(this);">');
}
</script>
<img src="testImage.gif" name="testImage" border=0 onclick="showCoords(this);">
<script language="javascript">
if(NS4){
d.write('</a>');
}
</script>
</td>
</tr>
</table>
</body>
</html>

adam0101 · Oct 15, 2002

If I were going to overlay an image that appeared in random places on the page with another image, I'd place the randomly appearing image in a <span> and place the overlay image relative to that <span>. That way it doesn't matter what the x,y coordinates of the random image are. No JavaScript needed.

Code:

<span style=&quot;position:relative&quot;>
  <img src=&quot;randomImage.jpg&quot;>
  <span style=&quot;position:absolute;left:5px;top:5px;&quot;>
    <img src=&quot;overlayImage.gif&quot;>
  </span>
</span>

capitano · Oct 15, 2002

Adam -- that's awesome. I love it when people think outside the box. Your solution is perfect, and saves the headache of having to dynamically readjust stylesheets using JS.

Regards,
Capitano

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I determine X, Y of image ? 1

capitano

Programmer

xutopia

Programmer

starway

Programmer

wray

Technical User

capitano

Programmer

capitano

Programmer

wray

Technical User

capitano

Programmer

xutopia

Programmer

wray

Technical User

sjnarkis

Programmer

xutopia

Programmer

sundemon

Programmer

sundemon

Programmer

sundemon

Programmer

adam0101

Programmer

capitano

Programmer

Similar threads

Part and Inventory Search

Sponsor