Sunday, February 7, 2016

How to Read Mouse Coordinates using Javascript Code

In this tutorial, you will learn how to read mouse coordinates in your screen. This will show the X and Y positioning of the mouse. This is useful in adjusting elements on your page by determining its position.
Hope you learn from this simple yet useful function


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function readMouseMove(e){
var X = document.getElementById('x_coords');
var Y = document.getElementById('y_coords');
X.innerHTML = e.clientX;
Y.innerHTML = e.clientY;
}
document.onmousemove = readMouseMove;
</script>
<title>Read Mouse Coordinates</title>
</head>
<body>
<table>
<tr>
        <td colspan="2"><h1>Read Mouse Coordinates</h1></td>
</tr>
<tr>
<td><h2 id="x_coords">0</h2></td>
<td>X Positioning</td>
</tr>
<tr>
<td><h2 id="y_coords">0</h2></td>
<td>Y Positioning</td>
</tr>
</table>
</body
</html>

Share this

0 Comment to "How to Read Mouse Coordinates using Javascript Code"

Post a Comment