• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 587
  • Last Modified:

How can you find what HTML elements are at a specific pixel coordinate?

I am looking for a JavaScript function that will take the X & Y Axis screen position, and return any HTML elements that display at that point.

Thanks for any help!
0
jshallard
Asked:
jshallard
  • 2
  • 2
1 Solution
 
Pravin AsarPrincipal Systems EngineerCommented:
I know you can do this with .Net,

http://msdn2.microsoft.com/en-us/library/system.windows.forms.htmldocument.getelementfrompoint.aspx

To find position of element  with Javascript , I do have script.

How the X and Y co-ordinates are entered .. are these picked by mouse click ?

Let me know. I could suggest a way to get Element given the event object.

0
 
gops1Commented:
Have a look at this example:

<html>
      <head>
            <title>Script Demo Gops</title>
            <style>body, table,input, select,span, textarea{font-family:verdana;font-size:xx-small;}</style>
            <script language="javascript">


                  function getObjPosition(obName) {
                        // This function will return an Object with x and y properties
                        var useWindow=false;
                        var coordinates=new Object();
                        var x=0,y=0;
                        // Browser capability sniffing
                        var use_gebi=false, use_css=false, use_layers=false;
                        if (document.getElementById) { use_gebi=true; }
                        else if (document.all) { use_css=true; }
                        else if (document.layers) { use_layers=true; }
                        // Logic to find position

                        if (use_gebi) {
                              var o=obName;
                              x=AnchorPosition_getPageOffsetLeft(o);
                              y=AnchorPosition_getPageOffsetTop(o);
                        }else if (use_css) {
                              x=AnchorPosition_getPageOffsetLeft(obName);
                              y=AnchorPosition_getPageOffsetTop(obName);
                        }else if (use_layers) {
                              var found=0;
                              for (var i=0; i<document.anchors.length; i++) {
                                    if (document.anchors[i].name==obName) { found=1; break; }
                              }
                              if (found==0) {
                                    coordinates.x=0; coordinates.y=0; return coordinates;
                              }
                              x=document.anchors[i].x;
                              y=document.anchors[i].y;
                        }else {
                              coordinates.x=0; coordinates.y=0; return coordinates;
                        }
                        coordinates.x=x;
                        coordinates.y=y;
                        return coordinates;
                  }

                  function AnchorPosition_getPageOffsetTop (el) {
                        var ot=el.offsetTop;
                        while((el=el.offsetParent) != null) { ot += el.offsetTop; }
                        return ot;
                  }

                  function AnchorPosition_getPageOffsetLeft (el) {
                        var ol=el.offsetLeft;
                        while ((el=el.offsetParent) != null) { ol += el.offsetLeft;}
                        return ol;
                  }


                  window.onload=function(){
                        if (document.addEventListener){
                              document.addEventListener("mouseover", clickHandler, true);
                        }else if(document.attachEvent){
                              document.attachEvent("onmouseover", clickHandler);
                        }
                  }

                  function clickHandler(evt){
                        var msg="";
                        var obj = (typeof event != 'undefined')?event.srcElement: evt.target;
                        var o=getObjPosition(obj);
                        var t=document.getElementById('textarea');
                        msg+="Object Details";
                        msg+="\nObject Type: "+obj.tagName;
                        msg+="\nObject X pos: "+o.x;
                        msg+="\nObject Y pos: "+o.y;
                        t.value=msg;
                  }

          </script>
     </head>
<body>
      <table cellpadding="0" cellspacing="0" border="1" width="600">
            <tr>
                  <td colspan="3">The below image is from the main table</td>
            </tr>
            <tr>
                  <td colspan="3"><img src="1.jpg" width="86" height="120" border="1"></td>
            </tr>
            <tr>
                  <td><input type="text" name="textbox1"></td>
                  <td><input type="checkbox" name="checkbox1"></td>
                  <td>
                        <select name="testselect">
                              <option>Opt 1</option>
                              <option>Opt 1</option>
                        </select>
                  </td>
            </tr>
            <tr>
                  <td colspan="3"><textarea rows="10" cols="100" id="textarea" name="textarea"></textarea></td>
            </tr>
      </table>
</body>
</html>
0
 
jshallardAuthor Commented:
Hi

Thanks for both your prompt responses.  What i am after is something like the "GetElementFromPoint" method that pravinasar posted - but that is in javascript.

Gosp1 - thanks for posting that code - but that is really coming at it from the opposite end that i need.  I want to supply the x & y, and be given the element.

Thanks again for any input
0
 
Pravin AsarPrincipal Systems EngineerCommented:
0
 
jshallardAuthor Commented:
Thanks pravinasar

The link you gave is only for HTML rendered in the java "webrenderer browser"... however, it did lead me on to discover the following, which was what i was after:

http://www.codingforums.com/archive/index.php?t-21674.html
http://msdn2.microsoft.com/en-us/library/ms536417.aspx

So thanks for your help!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now