Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

DHTML
Autour de la souris

  Intercepter les coordonnées du pointeur

fonction  principe  la methode elle-meme  demonstration  telechargement du script  Compatibilite du script... a partir de : 

  Fonction
Ce script n'est qu'un 'brique' à utiliser dans d'autres. Il permet simplement d'intercepter les coordonnées du pointeur en permanence, à chaque mouvement.
  Principe
Après avoir détecté le type de navigateur (compatible Netscape 4.x, 6.x; IE4+, Opera 5+), on demande au navigateur de lancer une fonction à chaque événement 'mouvement de souris'.
Cette fonction intercepte les coordonnées du pointeur en X et Y. En effet, en JavaScript, l'élément générateur d'un événement transmet systématiquement ses coordonnées, il n'y a qu'a en demander l'interception (c'est ce qu'on a fait au début).
On place ensuite les données obtenues dans un formulaire, juste pour matérialiser l'interception, cela n'est nullement nécessaire au script.
  Le script
dans la partie <head>
<script language="JavaScript">

// Détection du navigateur
nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// On lance la détection des mouvements du pointeur
// Instructions pour Netscape 4.x
if (nc4) {
document.captureEvents(Event.MOUSEMOVE);
}

// Instructions pour Netscape 6.x
if (nc6) {
document.addEventListener("mousemove",document.onmousemove,true);
suivre_souris;
}

// Instructions pour Internet Explorer
document.onmousemove = suivre_souris;

// Fonction exécutée pour chaque mouvement du pointeur
function suivre_souris(e) {

// Instructions pour Netscape 4.x et supérieur
if (nc6 || nc4) {

// On affecte à 'x' et 'y' les positions X et Y du pointeur lors de l'événement 'move'
var x = e.pageX;
var y = e.pageY;
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
var x = event.x;
var y = event.y;
}

// On affecte les données obtenues aux champs du formulaire (pour prouver l'interception ;-)
document.formulaire.pos_x.value = x;
document.formulaire.pos_y.value = y;
}
</script>

dans la partie <body>
<!-- Formulaire recueillant les coordonnées du pointeur -->
<form name="formulaire">
X : <input type="text" name="pos_x" size="5">
Y : <input type="text" name="pos_y" size="5">
</form>
  Démonstration

X :
Y :
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    sou_coords.zip
    1 Ko    		 telechargez le script telechargez le script
    Script séparé :
    sou_coords2.zip
    1 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter