x,y find

**midhul** · 02-08-2008, 11:01 AM

HI, can anybody tell me how i can find the x,y position of an image on a
web page?

I also need the code to set the x,y position for an image.

can any body please help!

**djr33** · 02-08-2008, 11:19 AM

position within an image or the position of the corner of an image within a webpage?

**midhul** · 02-08-2008, 11:28 AM

within the browser!

**jscheuer1** · 02-08-2008, 03:04 PM

Finding the position is explained very well here:

http://www.quirksmode.org/js/findpos.html

the code put forth there (it could be written any number of ways) is:

Code:

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}

So, if you wanted the position of an image, say -

HTML Code:

<img id="some_id" src="some.jpg">

you could do:

Code:

var xy=findPos(document.getElementById('some_id'));
alert("image 'some_id' x="+xy[0]+" y="+xy[1]);

Setting the position is easier in one way because all you need to do is set its left and top style properties:

Code:

var im=document.getElementById('some_id').style;
im.left='250px';
im.top='54px';

And it's a little more complicated because generally to do so the image must have absolute positioning. If it already has it, fine - otherwise:

Code:

var im=document.getElementById('some_id').style;
im.position='absolute';
im.left='250px';
im.top='54px';

But this will take an otherwise static or relatively positioned element out of the flow of the document. This may or may not cause other issues that you would want to deal with.

There are drag and drop scripts around that take care of these things for you. If you are interested in going that route, here is one fairly good one:

http://www.dynamicdrive.com/dynamici...drag/index.htm

Walter Zorn also has a good one:

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

I'm sure there are many others around.

**midhul** · 02-09-2008, 07:19 AM

Thank a billion times, can you tell me how i can do this onClick?

**jscheuer1** · 02-09-2008, 07:37 AM

This? Taken with your first post, I take it you now want to click on an image to find its coordinates, right? Would you want them displayed somewhere else on the page, or popped in an alert? Then you click on it again to move it? Where would you move it to? Doesn't seem very intuitive. What exactly are you trying to do?

**midhul** · 02-09-2008, 07:40 AM

I actually want a link which when pressed an alert shows the x any
y

like <a href="#" onClick="someting">find x and y</a>

**jscheuer1** · 02-09-2008, 07:58 AM

There are numerous ways, here's one:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}
function clickPos(id){
var xy=findPos(document.getElementById(id));
return "image '"+id+"' x="+xy[0]+" y="+xy[1];
}
</script>
</head>
<body>
<a href="#" onclick="alert(clickPos('my_id'));return false;">find x and y</a>
<img id="my_id" src="some.jpg" border="1" width="150" height="30" alt="some image">
</body>
</html>

The border, width, and height are optional, I included them so you could 'see' the image even if there were no image file available.

**midhul** · 02-10-2008, 07:43 AM

Thanks again! its working
i cant thankyou enough

Thread: x,y find

Thread Tools

Search Thread

x,y find

Bookmarks

Bookmarks

Posting Permissions