Solved

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

Posted on 2007-11-14
5
560 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 29

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 29

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

617 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