Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

POSITION DE LA SOURIS DANS LA PAGE


Information sur le tutorial

Catégorie :Tutoriaux Date de création : 06/07/2006 19:48:53 Vu : 14 947 fois

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note


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)


signaler à un administrateur
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....

signaler à un administrateur
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...

signaler à un administrateur
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?

signaler à un administrateur
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)

signaler à un administrateur
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 !

signaler à un administrateur
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 ?

signaler à un administrateur
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.

signaler à un administrateur
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 :)

signaler à un administrateur
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)

signaler à un administrateur
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

signaler à un administrateur
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';   }

signaler à un administrateur
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)

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Comparez les prix Nouvelle version

Photothèque Nouveau !



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
Temps d'éxécution de la page : 0,094 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.