Clone wiki

MouseTracker / Home


MouseTracker is a Javascript script to create mouse trackers. For example, it can create a div or an image that will follow your exact mouse moves. It requires MooTools >= 1.2.


MouseTracker features are:

  • Tracks exact mouse moves
  • Creates multiple instances
  • Uses customizable div or an image
  • Works on Safari, Firefox, IE 6/7, Chrome and Opera
  • Documentation generated with PDoc
  • Open source, full code is available on BitBucket

Usage Example

Drop mootools.js and mousetracker.js in your javascripts directory and include it in your XHTML layout :

<script src="javascripts/mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/mousetracker.js" type="text/javascript" charset="utf-8"></script>

then you can create new MouseTracker instances :

new Bounga.MouseTracker({delay: 400, color: '#33FF00'});
new Bounga.MouseTracker({delay: 300, color: '#FF3300', 'offset': {x: 30, y: -20}, 'size': 10});
new Bounga.MouseTracker({delay: 1000, image: 'cat.gif'});

by default, MouseTracker create a square div but you can use an image.

Take a look at 'example' directory to see examples.


Available options to tune your MouseTracker are:

'delay': 200                  // Delay between mouse movement stop and start of tracker movements
'offset': { x : -20, y : 20 } // Offset to apply between mouse and tracker
'color': '#666'               // Color to fill the div with'
'size': 20                    // Size (width and height) of the div
'z-index': 20                  // z-index of the div
'image': null                 // Use an image rather than a div for the tracker
'id': null	                // DOM id for the tracker
'class': null	                // CSS class for the tracker
'top': -1000	                // Initial 'top' value
'left': -1000	                // Initial left value
'position': 'absolute'	    // Positioning method (absolute or relative). Should be left as 'absolute' unless you know what you're doing

Get the source

$ hg clone


If you want to contribute you should take a look at:

Problems, comments, and suggestions are welcome on the ticket system.

Copyright (c) 2009 Nicolas Cavigneaux, released under the MIT license