Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 581
  • 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 AsarCommented:
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 AsarCommented:
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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