begin process at 2012 02 14 11:09:16
  Trouver un code source :
 
dans
 
Accueil > 

Tutoriels

 > 

Tutoriaux

 > POSITION DE LA SOURIS DANS LA PAGE

POSITION DE LA SOURIS DANS LA PAGE


 Information sur le tutoriel

Note :
8 / 10 - par 1 personne
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10


 Description

Mais ou est donc le curseur de la souris quand j'ai scrollé la page ?

Tutorial

Hello JavaScripteuses et teurs...


Ce petit tutorial n'a pas d'autre but que de montrer comment récupérer la position de la souris dans une page et ce quelque soit sa position dans la fenêtre d'affichage et le navigateur...

<script language="JavaScript" type="text/javascript">
var Mouse_X;
// Variable globale Position X de la Mouse
var Mouse_Y; // Variable globale Position Y de la Mouse

//-----------------------------------------------------------------------------
// l'argument e n'est passé à la fonction que par les navigateur n'ayant pas
// implémenté
event comme objet, IE posséde son propre objet bien connu event
//-----------------------------------------------------------------------------
function WhereMouse(
e ){
  var DocRef;    // Variable pour IE uniquement

  // L'événement est passée à la fonction
  // donc tous sauf IE…
  if(
e){                     // Dans ce cas on obtient directement la position dans la page
    Mouse_X = e.
pageX;
    Mouse_Y = e.
pageY;
  }
  else{                     
// Dans ce cas on obtient la position relative à la fenêtre d'affichage
    Mouse_X =
event.clientX;
    Mouse_Y =
event.clientY;

    //-- Il faut traiter le CAS des DOCTYPE sous IE
    if(
document.documentElement && document.documentElement.clientWidth) // Donc DOCTYPE
      DocRef =
document.documentElement;   // Dans ce cas c'est documentElement qui est réfèrence
    else
      DocRef =
document.body;                   
// Dans ce cas c'est body qui est réfèrence

    //-- On rajoute la position liée aux ScrollBars
    Mouse_X += DocRef.scrollLeft;
    Mouse_Y += DocRef.scrollTop;
  }
}

//== INITIALISATION ================
document.onmousemove = WhereMouse;
</script>

Voila That's All Folks !...

Aller Bon Code...

;0)


Commentaires

Commentaire de hvb le 28/07/2006 12:12:08

ouais mais...
pourquoi ne pas l'avoir posté sous forme de code?
On ne peut pas vraiment parler de tutos ici....

Commentaire de PetoleTeam le 28/07/2006 12:16:47

1000 Excuses...
J'ai tenté de faire les deux en même temps en commentant la source pour quelle soit réutilasable directement...

Commentaire de Mastronic le 18/11/2006 11:55:29

bonjour,
ok, cela fonctionne sous IE V6.0

Mais pour les autres navigateur ( FireFox par ex )
que doit t'on passé comme parametre (variable e)?  

De meme pour la variable DocRef permetant de prendre en compte le scroolbar... quelque chose de similaire le remplace?

Commentaire de PetoleTeam le 20/11/2006 17:44:32


Bonjour,

En ce qui concerne la gestion des événements il y a deux techniques différentes...

- MicroSoft posséde un seul objet événement par fenêtre, connu sous le nom de event.
- Les dissidents, les autres en somme, crée un objet événement par Evénement et le passe en paramétre au gestionnaire, la fonction en fait, d'ou l'argument e de la fonction.

Dans la fonction on test si il y a présence de l'argument et si OUI ce n'est pas IE.

Pour les Propriétés elles différent également d'un navigateur à l'autre et il parfois difficile de si retrouver, c'est le pourquoi de ce "Tutorial" pour la position de la souris.

J'espère avoir répondu à ton attente.
;0)

Commentaire de Evangun le 30/05/2007 17:04:36

Ca marche très bien, mais quand on passe à un autre onglet/fenêtre et qu'on revient, ça ne marche plus ! Il y aurait une solution à ça ? Merci !

Commentaire de Evangun le 30/05/2007 17:44:14

Au temps pour moi, ce n'est pas la faute de ce script :p
Par contre je n'ai pas compris en quoi le DocType changeait qqch ?

Commentaire de PetoleTeam le 08/06/2007 13:46:48

Bonjour,
Réponse rapide et tardive mais...
Sous IE DOCTYPE change l'intialisation de document.body.scrollLeft, ou autre, qui reste à 0, ce que l'on rencontre sur certains site encore ou l'affichage d'un DIV reste collé en haut de la page.
Je n'ai plus en tête les sites qui traite de cela, c'était il y a longtemps, et la raison pour laquelle IE ne l'initialise pas m'échappe.

Commentaire de Lomic2 le 20/06/2008 23:16:00

et si je veux récupérer les variables MouseX et MouseY et les passer à un élément de style, je peux faire comme ça:
<style type="text/css">#mon_div_qui_doit_apparaitre_la_ou_est_la_souris {position:absolute; top: javascript:document.write(MouseY); left: javascript:document.write(MouseX); width:200; visibility:hidden}</style>

je suis pas sûr de mon coup :)

Commentaire de PetoleTeam le 21/06/2008 10:21:11

Bonjour,
On ne peut pas récupérer du javascript directement dans le STYLE, il faut passer par une fonction de positionnement...
function Move_To( id_){
  var O_Div = document.getElementById( id_);
  O_Div.style.left = Mouse_X +"px";
  O_Div.style.top  = Mouse_Y +"px";
}
... par exemple
pas mal d'exemple de l'utilisation sur ce site ou ailleurs, notamment dans des sources d'INFO BULLE ou DRAG&DROP...
;O)

Commentaire de demnatis le 28/03/2009 18:26:17

Bonjour,
Tout comme LOMIC2, je souhaite faire apparaitre une div sur un onemouseover
J'ai repris ton code afin de faire afficher une div a la  position du pointeur.
J'ai lu que l'on peut attribuer une succession de commande a une "function" mais je doute de l'exactitude de mon code.
Pourrais tu me donner un conseil.
Merci

Commentaire de demnatis le 28/03/2009 18:56:53

function afficheId(baliseId)
     {   document.getElementById(WhereMouse);
     document.getElementById(baliseId).style.display='block';     }
function cacheId(baliseId)
    {   document.getElementById(baliseId).style.display='none';   }

Commentaire de PetoleTeam le 30/03/2009 17:37:56

Bonjour,
Grossière erreur que de passer le nom d'une fonction à la méthode document.getElementById, tu dois avoir des ERREURS non ?
Je ne maitrise pas bien ton soucis avec le code ci dessus.

;O)

Commentaire de fierobe le 03/08/2010 02:00:22

Bonsoir,
je suis désolé pour ce commentaire un peu tardif dans la date...
Je trouve ton code très bien ! Mais je ne vois pas comment l'on gère la position des barres "scroll" dans tout autre navigateur que IE. Cela me pose problème, j'ai essayé différentes méthodes qui ne doivent pas fonctionner. Aurais-tu la réponse ?

Commentaire de PetoleTeam le 03/08/2010 10:59:00

Bonjour,

pageX et pageY renvoient les coordonnées X et Y du pointeur de la souris, par rapport à l'ensemble du document.

Ces propriétés prend en compte les scroll horizontal et vertical de la page.

IE ne prend pas en compte cette propriété et voila pourquoi il faut passer par l'ajout du scroll.

;O)

Commentaire de PetoleTeam le 03/08/2010 11:03:58

Bonjour,

pageX et pageY renvoient les coordonnées X et Y du pointeur de la souris, par rapport à l'ensemble du document.

Ces propriétés prend en compte les scroll horizontal et vertical de la page.

IE ne prend pas en compte cette propriété et voila pourquoi il faut passer par l'ajout du scroll.

;O)

Commentaire de fierobe le 03/08/2010 11:08:20

Merci beaucoup ! j'aurais dû lire plus attentivement...

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,326 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales