| <html lang="en"> |
| <head> |
| <style> |
| #mousetracker { |
| position: absolute; |
| left: 0; |
| top: 0; |
| height: 400px; |
| width: 100px; |
| padding: 0; |
| border: 1px solid; |
| box-sizing: border-box; |
| } |
| #display { |
| position: absolute; |
| left: 150px; |
| top: 50px; |
| } |
| </style> |
| <title>Mouse position tracker</title> |
| </head> |
| <body> |
| <div id="mousetracker"> |
| <div style="padding: 160px 5px;">Move mouse here</div> |
| </div> |
| <div id="display"> |
| <b>Div tracking mouse position</b> |
| <h2 id="status"> |
| 0, 0 |
| </h2> |
| </div> |
| <script> |
| (() => { |
| const mouseTracker = document.getElementById('mousetracker'); |
| mouseTracker.addEventListener('mousemove', (e) => { |
| const xPos = e.pageX - mouseTracker.offsetLeft; |
| const yPos = e.pageY - mouseTracker.offsetTop; |
| document.getElementById('status').innerText = `${xPos}, ${yPos}`; |
| }); |
| })(); |
| </script> |
| </body> |
| </html> |
