<pedrocorreia.net ⁄>
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

 
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


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

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

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

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

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

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

 
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

 
<php ⁄><asp.net ⁄><vb.net ⁄><csharp ⁄><actionscript ⁄><sql ⁄><javascript ⁄><vb6 ⁄><vba ⁄><xml ⁄><css ⁄><asp ⁄>
 

<Javascript get mouse coordinates/ position ⁄ >




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


Subscribe Snippets RSS  Subscribe Snippets Updates by E-mail


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 ^_^'')


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.



Subscribe Snippets RSS  Subscribe Snippets Updates by E-mail





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