Solved

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

Posted on 2007-11-14
5
546 Views
Last Modified: 2009-12-16
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
Comment
Question by:jshallard
  • 2
  • 2
5 Comments
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 20284206
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
 
LVL 17

Expert Comment

by:gops1
ID: 20285982
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
 

Author Comment

by:jshallard
ID: 20289206
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
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 250 total points
ID: 20290227
0
 

Author Comment

by:jshallard
ID: 20292713
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now