How do I get the absolute position of an image?

Hi!
How do I get the absolute position of an image (html image tag without style)?

thx in advance
Chrisi

Here the page i’ve just created just for you:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>get the absolute position of an image</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
var isDHTML=false;
var isLayers=false;
var isAll=false;
var isID=false;


if (document.getElementById){
	isID = true; isDHTML = true;
	}
	else {
		if (document.layers) {
			isLayers = true;
			isDHTML = true;
		}
		else {
			if (document.all) {
				isAll = true;
				isDHTML = true;
			}
	}
}

function findDOMObj(ObjectID){
	if (isID) { return (document.getElementById(ObjectID));}
	else {
		if (isAll){ return (document.all[objectId]);}
		else {
			if (isLayers) { return  (document.layers[ObjectID]);}
		}
	}
}
function GetAbsPosition(Obj){
	var left = findDOMObj(Obj).style.posLeft;
	var top = findDOMObj(Obj).style.posTop;	
	alert("Top:" + top + " Left:" + left);
}
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:159px; top:81px; width:320px; height:235px; z-index:1; background: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;" onclick="JavaScript:GetAbsPosition(this.id);" >This
  is layer 1: click to get abs position</div>
<div id="Layer2" style="position:absolute; left:266px; top:240px; width:392px; height:177px; z-index:2; background: #6699CC; layer-background-color: #6699CC; border: 1px none #000000;"  onclick="JavaScript:GetAbsPosition(this.id);" >This
  is layer 2: click to get abs position</div>
<img id="KevBooks" src="http://sitepoint.com/graphics/kevbook.gif" alt="Kev Books" longdesc="http://sitepointforums.com" onclick="JavaScript:GetAbsPosition(this.id);" />
</body>
</html>

Study the code to understand what’s happaning…

Hi!
Thanks for your script.
But I still have the same problem i can’t get the position of the img. I moved it with some table-tags but this script still returns that the img is on position 0,0.
Can u help me?

<table width=300 height=400>
<tr>
<td width=100>
</td>
<td>
<img id=“KevBooks” src=“http://sitepoint.com/graphics/kevbook.gif” alt=“Kev Books” longdesc=“http://sitepointforums.com” onclick=“GetAbsPosition(this.id);” />
</td>
</table>

thx in advance
Chrisi

I’m on the phone right now - but just to let you know i’ll give you an answer soon.

While you’re waiting - look into the offset attributes for the image.

Flawless

he he - REALLY couldn’t find an easy solution.
See - without you specifying a top - i’m not sure
how to access it conventionally.

However i did promise you a solution and SO:

function findTop(iobj){ttop=0;while (iobj){ttop+=iobj.offsetTop;iobj=iobj.offsetParent;}return ttop;}

However that might not make sense straight away… SO…



<html>
<body>
<table width=300 height=400>
<tr>
<td width=100></td>
<td>
<img id=“KevBooks” src=“http://sitepoint.com/graphics/kevbook.gif” alt=“Kev Books” longdesc=“http://
sitepointforums.com” onclick=“GetAbsPosition(this.id);” border=1>
</td>
</tr>
</table>
<div name=“Shower” id=“Shower” style=“position:absolute;top:0;left:50;height:20;width:40;border:1px
solid blue” border=1>HERE</div>
</body>
</html>
<script language=“Javascript”>

var de = document.getElementById;
var YourImg = de(‘KevBooks’);

function findTop(iobj){
ttop=0;
while (iobj){
ttop+=iobj.offsetTop;
iobj=iobj.offsetParent;
}
return ttop;
}

alert( findTop( YourImg ) );

de(‘Shower’).style.top=findTop( YourImg );

</script>




This should demonstrate how it works just fine for you.
If you want to see a demo then it's at:
http://www.passway.org/Chrisi.html

There you go.
If you need more just let me know

Flawless

to do it this way is extremely long winded. I would do this from another, angle


<html>
<head>
<title></title>

<script type="text/JavaScript">
<!--

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
	if (ns4) block = document.blockDiv
	if (ie4) block = blockDiv.style
	block.xpos = parseInt(block.left)
	block.ypos = parseInt(block.top)
}

function moveTo(obj,x,y) {
	obj.xpos = x
	obj.left = obj.xpos
	obj.ypos = y
	obj.top = obj.ypos
}

function moveBy(obj,x,y) {
	obj.xpos += x
	obj.left = obj.xpos
	obj.ypos += y
	obj.top = obj.ypos
}

function showObject(obj) {
	if (ns4) obj.visibility = "show"
	else if (ie4) obj.visibility = "visible"
}

function hideObject(obj) {
	if (ns4) obj.visibility = "hide"
	else if (ie4) obj.visibility = "hidden"
}

// -->
</script>
</head>

<body onLoad="init()">

<a href="javascript:alert('X: ' + block.xpos)">xpos </a>,
<a href="javascript:alert('Y: ' + block.ypos)">ypos </a>
<br />Visibility:
<a href="javascript:showObject(block)">show</A>,
<a href="javascript:hideObject(block)">hide</A>
<br />MoveTo:
<a href="javascript:moveTo(block,100,100)">(100,100)</a>,
<a href="javascript:moveTo(block,200,160)">(200,160)</a>,
<a href="javascript:moveTo(block,300,240)">(300,240)</a>
<br />MoveBy:
<a href="javascript:moveBy(block,10,0)">(10,0)      </a>,
<a href="javascript:moveBy(block,-10,0)">(-10,0)    </a>,
<a href="javascript:moveBy(block,0,10)">(0,10)      </a>,
<a href="javascript:moveBy(block,0,-10)">(0,-10)    </a>

<img src="http://64.4.16.24/EN_SG_140x60.gif" id="blockDiv" style="position:absolute; left:100px; top:100px; background-color:orange; layer-background-color:orange;">

</body>
</html>

now you have complete control over the thing, enjoy;)

Sorry Andrew - but you KNOW when it’s shoot-down time :stuck_out_tongue:

  1. she only wanted to know how to get the top of the image.

  2. she wanted to get the top of an image that DOESN’T have a style tag - hence putting it into a div with a style tag is cheating :stuck_out_tongue:

  3. Your line:
    <img src=“http://64.4.16.24/EN_SG_140x60.gif” id=“blockDiv” style=“position:absolute; left:100px; top:100px; background-color<img src=“images/smilies/redface.gif” border=“0” alt=”“>range; layer-background-color<img src=“images/smilies/redface.gif” border=“0” alt=”“>range;”></div>
    Is … to say the least … crap :stuck_out_tongue: - but i guess i’m being pedantic - i know what you meant here.

I’ve experienced her problem before - you have an image that’s in a table - and it’s not being positioned absolutely, but you want to find the top of it all the same…
I believe the solution i posted to be one of the only sure answers to this problem.

Feel free to have another hack at it if you want :stuck_out_tongue:

he he

Flawless

hehe i should of read the post,

How do I get the absolute position of an image (html image tag without style)?

I only read your thread Flawless :wink:

bloody smilies messing up the post again btw lol.
Let me have another go and think about it this time then lol;)

lol - YEP :stuck_out_tongue:
You REALLY did deserve that one :smiley:

I’ll see what you come up with when i get back to the office after lunch!

Flawless

Hi!
thanks for all your help. i think i’ll handle this with CSS :slight_smile: . its much too complicated with javascript.

thx
Chrisi

No WAY!

Whoa - i’m sorry - but i really resent that!
it’s TWO lines:

You want to find the top of ‘MyImage’… right?
well you don’t have to worry about what the function does:

<script langague=“Javascript”>
// You don’t need to worry about this
function findTop(iobj){ttop=0;while (iobj){ttop+=iobj.offsetTop;iobj=iobj.offsetParent;}return ttop;}

//This is all you need:
findTop(doucment.all.MyImage);

</script>

When it comes down to it - that’s only one line!!!

I SO don’t understand why that’s too complex for you?!

Flawless

Well… I don’t have problems using this code but this looks like there’s no possibility to move the image.

i also don’t like to use code i don’t understand
function findTop(iobj){ttop=0;while (iobj){ttop+=iobj.offsetTop;iobj=iobj.offsetParent;}return ttop;}

Could you explain to me what += does and what the offsetparent property returns?

Thank u very much

If you want to know the postion of an absolute object I dont see why it does not work?

for any relative object it will give you zero unless offcourese you’ve specified it top and left location in css.

  1. Azizur - that makes no sense - concentrate on the words, THEN write them.

  2. Chrisi:

You’re trying to find the absolute top of an object that isn’t positioned absolutely…
So you need to find how far from the top of the page is, but you haven’t specified it…
If you try using style.top or pixelTop - you’ll find it’s either undefed or 0… this is because it hasn’t been assigned.
If you try using offsetTop - it tries to get the distance between the top of the object and it’s parent… but in the case of your image - it’s inside a table cell… and the distance is 0.

So what that function does is:
function findTop(iobj){
line 1: ttop=0;
line 2: while (iobj){
line 3: ttop+=iobj.offsetTop;
line 4: iobj=iobj.offsetParent;
}
line 5: return ttop;
}

So - you pass it iobj - the handle of the object you want to find the top of - example: findTop(document.all.MyImg);

Then the function sets a variable ‘ttop’ to 0 - so that there is no hangover from previous callings of the function.

Line 2 says that while iobj (the object you sent it) exists - it should do line 3 and 4.

line 3 says add the distance between iobj and the parent of it to ttop. (initially 0 - since it’s the distance between the td and the image)

line 4 REASSIGNS iobj as that parent you just checked the distance to… so NEXT time round the while loop it will find the distance between the current parent, and the parent above it.

It will continue while iobj exists - which it won’t when it gets to the top of the dom (ie gone through all the parents) adding all the distances together to get the total.
This is the only way i can think of finding the top of an object that doesn’t have it’s top set by you.

You can then use this distance to set the top of another item as i showed you in the mockup page:

document.all.movingOBJECT.style.top=findTop(document.all.otherOBJECT);

I REALLY hope this is what you wanted - coz otherwise this is a lot of time wasted - but i think i’ve interpretted your desire properly.

Let me know if this doesn’t cover everything.

Flawless

Thank u for your explanaition. I thought that .offsetparent returns a value but it’s an object.

thx for all ur help
chrisi

That’s ok - any time.

Flawless