<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Javascript get mouse coordinates/ position ⁄ >




clicks: 18849 18849 2009-04-10 2009-04-10 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This



Here's a short snippet about mouse coordinates/ position in a webpage.

Since different browsers support DOM in different ways, we'll just have to adopt our script to get mouse coordinates, regarding that's equal to all browsers (well, nothing that you're not used to, in web-development ^_^'')


Please check an update version of this snippet.


MouseCoord.js, our main class.

  1. /**
  2. * MouseCoordinates Class
  3. *
  4. * @author: pedrocorreia.net
  5. */
  6.  
  7. /**
  8. * Get Mouse Coordinates
  9. * @param Event
  10. *
  11. * @return Int X Coordinate
  12. * @return Int Y Coordinate
  13. */
  14. var MouseCoord = function(event) {
  15. event = event || window.event;
  16.  
  17. /**
  18. * Get mouse coordinates
  19. *
  20. * @return Int X Coordinate
  21. * @return Int Y Coordinate
  22. */
  23. var e = {
  24. _x: (event.pageX || event.clientX + (document.documentElement || document.body).scrollLeft),
  25. _y: (event.pageY || event.clientY + (document.documentElement || document.body).scrollTop)
  26. };
  27.  
  28. /**
  29. * Output coordinates
  30. *
  31. * @param String
  32. */
  33. var _console = function(o){
  34. document.getElementById(o).innerHTML = "X: "+e._x+" Y: "+e._y;
  35. };
  36.  
  37. return {
  38. X: e._x,
  39. Y: e._y,
  40. toString: _console
  41. };
  42. };
  43.  








Init.js, for a better example let's just use document.onmousemove to show mouse coordinates, usually you won't do this :-)

  1. /**
  2. * @author pedrocorreia.net
  3. */
  4. window.onload = function() {
  5.  
  6. document.onmousemove = function(event){
  7. //ouput mouse coordinates
  8. MouseCoord(event).toString("console");
  9.  
  10. //call each coordinate
  11. document.getElementById("console2").innerHTML="X= " + MouseCoord(event).X + " Y= " + MouseCoord(event).Y;
  12.  
  13. //create object, recommended
  14. var mCoord=new MouseCoord(event);
  15. document.getElementById("console3").innerHTML="X=> " + mCoord.X + " Y=> " + mCoord.Y;
  16. };
  17.  
  18. };




Our html file:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <title>Mouse Coordinates</title>
  6. <script type="text/javascript" src="MouseCoord.js"></script>
  7. <script type="text/javascript" src="Init.js"></script>
  8. </head>
  9.  
  10. <body>
  11. <span id="console"></span>
  12. <br />
  13. <span id="console2"></span>
  14. <br />
  15. <span id="console3"></span>
  16. </body>
  17. </html>



Here's a short video of this script working:









If you have any doubt or found any error, please drop me an email.









clicks: 18849 18849 2009-04-10 2009-04-10 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This