Results 1 to 9 of 9

Thread: x,y find

  1. #1
    Join Date
    Feb 2008
    Posts
    81
    Thanks
    8
    Thanked 5 Times in 5 Posts

    Question x,y find

    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!

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    position within an image or the position of the corner of an image within a webpage?
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Feb 2008
    Posts
    81
    Thanks
    8
    Thanked 5 Times in 5 Posts

    Default

    within the browser!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2008
    Posts
    81
    Thanks
    8
    Thanked 5 Times in 5 Posts

    Default

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Feb 2008
    Posts
    81
    Thanks
    8
    Thanked 5 Times in 5 Posts

    Default

    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>

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Feb 2008
    Posts
    81
    Thanks
    8
    Thanked 5 Times in 5 Posts

    Default

    Thanks again! its working
    i cant thankyou enough

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •