position div with mouse coords (onClick event)


/ Published in: JavaScript
Save to your folder(s)

On click event, display a div on mouse coords.
Tested on Firefox 3.6.11, chrome 6, internet explorer 6.
Based on this source code: http://www.webdeveloper.com/forum/showthread.php?t=92007


Copy this code and paste it in your HTML
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Aratti@py</title>
  5.  
  6. <script language="JavaScript" type="text/JavaScript">
  7.  
  8. function checkS(e){
  9. // capture the mouse position
  10. var posx = 0;
  11. var posy = 0;
  12. if (!e) var e = window.event;
  13. if (e.pageX || e.pageY)
  14. {
  15. posx = e.pageX;
  16. posy = e.pageY;
  17. }
  18. else if (e.clientX || e.clientY)
  19. {
  20. posx = e.clientX;
  21. posy = e.clientY;
  22. }
  23.  
  24. document.getElementById('pos').innerHTML = 'Mouse position is: X='+posx+' Y='+posy;
  25. document.getElementById('pos').style.left = posx;
  26. document.getElementById('pos').style.top = posy;
  27. document.getElementById('pos').style.display='block';
  28. }
  29. </script>
  30.  
  31. </head>
  32.  
  33. <body onClick="checkS(event)">
  34.  
  35. <div id="pos" style="position:absolute; display:none;">test</div>
  36. </body>
  37. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.