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 : 11 085 fois

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (9)
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)

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, 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,016 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é.