JavaScript elementFromPoint method
JavaScript method elementFromPoint returns the
presented element at the specified coordinate position given in the
arguments. In our example of elementFromPoint we have taken the coordinate
position by the user and then it will display element from that position.
Syntax:
| element =
document.elementFromPoint( X,Y) ; |
where element is the element object and X and Y are the
coordinates position.
Description of code:
In this example code we have created two text boxes
which is used for taking the coordinate positions by the user. When user clicks
on the button "Get Element" it calls the function getElement()
defined in the JavaScript. If user does not enter any coordinate position then
it check it and prints the alert message to enter coordinate positions in the
number format. After getting the appropriate position it shows the founded
element at the specified position in the alert message. Here is the full example
html code described as below:
elementFromPointExample.html
<html>
<body>
<script language="JavaScript">
function getElement() {
var firstPoint = document.getElementById("txt1").value;
var secondPoint= document.getElementById("txt2").value;
if(firstPoint==""){
alert("Please enter valid point as 100");
return false;
} else if(secondPoint==""){
alert("Please enter valid point as 100");
return false;
}
var tagObject = document.elementFromPoint(firstPoint, secondPoint);
var element = tagObject.tagName;
alert("The element located at point ("+firstPoint+","+secondPoint+") is "+element);
}
</script>
<p align="center"> </p>
<div style="background: #cf2255; width:'100%';" align="center">
<font color="#ffffcc" size="12pt"><b>Element From Point Example</b></font></div>
<center>
<div style="background: #ffffcc; width:'100%';" align="center">
<p align="left"> </p>
<table border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td width="40%">First point</td>
<td width="60%"> <input type="text" id="txt1" value=""/></td>
</tr>
<tr>
<td width="40%">Second point </td>
<td width="60%"><input type="text" id="txt2" value=""/></td>
</tr>
<tr>
<td width="30%" colspan="2" valign="middle" align="center">
<button onclick="return getElement();">Get Element</button>
</td>
</tr>
</table>
</div>
</center>
</body>
</html> |
Output :
If you will not enter the element position then it will
show an alert message to you to enter the position in the number format.
Download
Source Code
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
