PDA

View Full Version : 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:


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 -


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

you could do:


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:


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:


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/dynamicindex11/domdrag/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:


<!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