Principales caractéristiques

  • Traque les mouvements exactes de votre souris et les reproduit
  • Possibilité d'attacher plusieurs instances en parallèle
  • Utilise un div entièrement personnalisable ou une image
  • Fonctionne sous Safari, Firefox, IE 6/7, Chrome et Opera
  • Documentation API générée avec PDoc
  • Open source, le code source est disponible chez BitBucket

Téléchargement

  • Le code source disponible chez BitBucket. Si vous voulez corriger des bugs ou ajouter des fonctionnalités, c'est le bon endroit
  • Le code source est aussi disponible en archive zip

Une fois les sources récupérée, vous pouvez générer une version compressée de la librairie :

$ rake

Cette commande construira une version compressée de la lib dans le répertoire 'dist'. Vous aurez par la même occasion la documentation au format HTML dans le répertoire 'doc'.

Exemple d'utilisation

Déposez mootools.js et mousetracker.js dans votre répertoire javascripts et incluez les dans votre gabarit XHTML :

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

et vous pourrez créer vos instances MouseTracker :

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'});

par défaut, MouseTracker crée un div mais vous pouvez utiliser une image à la place.

Jetez un oeil au répertoire 'example' du projet pour voir des exemples d'utilisation en action.

Options

Les options disponibles pour personnaliser votre MouseTracker sont les suivantes :

// Délai entre l'arrêt du mouvement de la souris et le début du mouvement du traqueur
'delay': 200
 
// Ecart appliqué entre le pointeur de la souris et le traqueur
'offset': { x : -20, y : 20 }
 
// Couleur utilisée pour remplir le div
'color': '#666'
 
// Taille (hauteur et largeur) du div
'size': 20
 
// z-index of the div
'z-index': 20
 
// Utiliser une image plutôt qu'un div pour le traqueur
'image': null
 
// id DOM du traqueur
'id': null
 
// classe CSS du traqueur
'class': null
 
// valeur 'top' initiale
'top': -1000
 
// valeur 'left' initiale
'left': -1000
 
// méthode de positionnement du traqueur ('absolute' ou 'relative'). Devrait rester à 'absolute' à moins que vous soyez sûr de ce que vous faite
'position': 'absolute'

Récupérer les sources

$ hg clone http://bitbucket.org/Bounga/mousetracker