Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Location
    the windy city
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    determining image's x and y coordinates within a page

    I would like to determine the absolute coordinates, not in relation to parent element. Tried searching this board, but didn't find what I was looking for. If this had already been answered, please direct me to the appropriate thread.

    I tried implementing a script from this page and another one from this page , but I get back coordinates that are 0,0 when I know my image is not positioned in the top left corner of a screen.

  • #2
    New Coder
    Join Date
    Nov 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is, if you don't set them, you can't get them. The variable of top and left is null if you just load the page with relative positioning.

  • #3
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    ACTUALLY You can figure out the position of the image or anything else on the page with a little coding......

    Code:
    <html>
    <head>
    <script>
    var ErrorGapX = 0;
    var ErrorGapY =	20;
    
    function ErrorPosition(ErrorElement){
        ErrorPosX = ErrorElement.offsetLeft
      ErrorPosY = ErrorElement.offsetTop;
      ErrorWidth = ErrorElement.clientWidth;
      if(!ErrorWidth){ErrorWidth = ErrorElement.offsetWidth;}
      //ErrorElement.value=ErrorWidth;
      TheElement = ErrorElement.offsetParent;
      while(TheElement != null){
        ErrorPosX += TheElement.offsetLeft 
        ErrorPosY += TheElement.offsetTop;
        TheElement = TheElement.offsetParent;
      }
      ErrorPosX += ErrorGapX;
      ErrorPosY += ErrorGapY;
      
      alert("(" + ErrorPosX + "," + ErrorPosY + ")");
    }
    </script>
    </head>
    <body>
    <input type="button" name="ralph" onclick="ErrorPosition(this)" value="Click Me">
    <img src="frogpic.jpg" onclick="ErrorPosition(this)">
    
    </body>
    </html>
    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #4
    Regular Coder
    Join Date
    Dec 2002
    Location
    the windy city
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alien,

    does it only work onclick? I need it to work without having to click on the element, but when I tried it without the click it didn't work.
    Last edited by DoubleV; 01-13-2004 at 07:47 PM.

  • #5
    Regular Coder
    Join Date
    Dec 2002
    Location
    the windy city
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I finally got it.
    I put my javascript after the image in my code, but it was immideately after, so it looks like the image wasn't fully loaded yet when the script was called. I moved the script to the very bottom of the page and now it works.

    thanks!

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    It's better to call the function onload of the image

    <img src="frogpic.jpg" onload="ErrorPosition(this)">
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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