Discussion :

[oni13]

Bonjour,

Après un tas de recherches de scripts permettant d'obtenir la position de la souris, j'ai fini par en trouver un qui fonctionne, mais uniquement sous Chrome et IE (moi qui pensais que chrome fonctionnait comme FF).
En gros ca marche pas sous FF.

J'ai lu que cela pouvait venir de la gestion d'évènement par FireFox, mais je ne comprend pas car ce script semble bien calculer la présence ou non de l'objet event, le voici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function getMousePosition(event)
// Retourne la position de la souris sours forme de tableau
// Utiliser getMousePosition(event)[0] et getMousePosition(event)[1]
{
	var e = event || window.event;
	var scroll = new Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);;
	return new Array(e.clientX + scroll[0] - document.body.clientLeft,e.clientY + scroll[1] - document.body.clientTop);
}

Et voici comment je l'utilise (cela se trouve à l'interieur d'un code créant des points googleMaps)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Entete fonction
function createMarker(point, id, domaine) 
 
//Creation des points... (ok)
 
 
GEvent.addListener(marker, "mouseover", function() { 
var mouseInfo = document.getElementById('domaine'); //j'attrape ma div
mouseInfo.innerHTML = domaine ; //Je remplis le contenu de ma div (ok)
 
var mousePosition = getMousePosition(event); //Recuperation des coordonnées de la souris 
mouseInfo.style.left = mousePosition[0]+20; // Modification de la position de la div selon position souris
mouseInfo.style.top = mousePosition[1];
		} );

Si quelqu'un saurait me dire ce que ne va pas dans ma fonction getMousePosition (enfin je pense que ca vient de là) je lui en serait reconnaissant !

[Bovino]

Voir : Comment récupérer les coordonnées de la souris ?

moi qui pensais que chrome fonctionnait comme FF

Non, Chrome fonctionne comme Safari

[oni13]

Ok, mais ce script (qui s'ajoute au grand nombre de scripts que j'ai trouvé) ne fonctionne toujours pas sous FF, mais vu que l'exemple fonctionne, j'ai du faire une bêtise...

déjà je l'ai un peu modifié pour qu'il retourne un tableau, c'est gênant?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function getMousePosition(e){
    if(e){
	var tab = [e.pageX, e.pageY];
        }
    else{
        var monBody = document.documentElement || document.body;
	var tab = [window.event.x + monBody.scrollLeft, window.event.y + monBody.scrollTop];
    }
return tab;
}

Ensuite c'est peut-ête que je n'utilise pas (je n'ai rien compris) ce

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

target.dispatchEvent("click");

Dans mon code je dois le placer ou du coup?
A la place de mouseover ici? Car ca n'a pas fonctionné

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

GEvent.addListener(marker, "mouseover", function() {

[NoSmoking]

Bonjour,
il faut bien lire la FAQ pour voir que le fonction detectMouse() est mise sur l'événement du body onmousemove, ce qui veux dire que la fonction s'exécute en tâche de fond à chaque déplacement de la souris.

Te concernant, comme tu utilises l'API GoogleMap et que tu as mis un écouteur sur le mouseover d'un marker, il te suffit dans ce cas de récupérer la position de la mouse, mise à jour, à ce moment là.

Mais il y a mieux, tu peux récupérer, via l'API, la position de la mouse dans la map.

exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
var oInfo;
function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(46.9041736, 2.350987), 6);
 
    GEvent.addListener(map, "mousemove", function( /*overlay,*/ data){
      if( data){
        // recup position
        var pos = map.fromLatLngToContainerPixel( data);
        // affichage
        oInfo = oInfo ? oInfo : document.getElementById('info');
        oInfo.innerHTML = 'X : ' +pos.x +'<br>Y : ' +pos.y;
      }
    });
  }
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
  <div id="map_canvas" style="margin:auto;width: 600px; height: 600px"></div>
  <div id="info"></div>
</body>
</html>

je te laisse intégrer les insertions des différents fichiers

PS: il est temps de passer à la V3 de l'API

Note: The Google Maps Javascript API Version 2 has been officially deprecated as of May 19, 2010. The V2 API will continue to work as per our deprecation policy, but we encourage you to migrate your code to version 3 of the Maps Javascript API.

[oni13]

Oui j'ai bien remarqué que cela calculait la position à chaque mouvement de souris, je cherchais simplement à faire calculer la position au "mouseOver" de mon point et non au "onMouseMove" complet.

Je vais tester ce dernier script qui m'a effectivement l'air plus logique, je test ça demain sinon je reste sur un calcul avec onmousemove ça devrait fonctionner.

Merci

[oni13]

Ok, je n'ai pas utilisé le script de position dans la carte car j'utilise une div absolue.

Par contre, le script de l'exemple ne fonctionnait pas chez moi, plus particulierement la conditiond de présence de l'évènement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if(e){
        ...
}
    else{

je n'entrais jamais dans le else, j'ai donc mis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getMousePosition(e){
var nomnav = navigator.appName;
 
if(e){
     document.getElementById('zone').innerHTML = e.pageX+20 ;
     document.getElementById('zone1').innerHTML = e.pageY;
}
if (nomnav == 'Microsoft Internet Explorer')
{
 
	document.getElementById('zone').innerHTML = window.event.clientX + document.body.scrollLeft + 20;
	document.getElementById('zone1').innerHTML = window.event.clientY + document.body.scrollTop;
	}
}

De plus, utiliser la variable:
var monBody = document.documentElement || document.body;

ne fonctionnait pas, bizarre... j'ai donc fais sans et utilisé directement document.body


Voilà bon je sais pas pourquoi j'ai eu ces soucis, mais au cas ou quelqu'un les rencontre aussi :O.

merci encore pour votre aide

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (nomnav == 'Microsoft Internet Explorer')

Attention, depuis la version 9 il me semble, la gestion des événements d'IE a été standardisée, ce qui signifie qu'avec IE >= 9, tu rentreras dans les deux conditions.

[oni13]

Justement je suis sous IE9 et ça ne fonctionnait pas.
Car il rentre dans la première condition alors qu'il ne devrait pas (enfin il y rentre mais ça ne marche pas). Il semblerait donc que IE9 fonctionne comme le 8.

Ce n'est pas gênant qu'il rentre dans les 2 conditions, cela ne fera que remplacer le contenu de mon span.

Le code marche sous IE 9 et 8, chrome, firefox. (bug sur IE7)

A revérifier alors quand IE10 sera parmi nous... mais je ne vois pas quoi faire alors, à part vérifier la version de IE dans ma condition

[NoSmoking]

Par contre, le script de l'exemple ne fonctionnait pas chez moi, plus particulierement la conditiond de présence de l'évènement:

visiblement tu n'as pas choisi la meilleur

ne fonctionnait pas, bizarre... j'ai donc fais sans et utilisé directement document.body

tu as quoi comme DOCTYPE à ton document ?

Ok, je n'ai pas utilisé le script de position dans la carte car j'utilise une div absolue.

je ne saisie pas le soucis, il suffit de rajouter les offsetLeft et offsetTop, de la DIV contenant la map, aux valeurs retournées par la fonction, qui elles sont relatives à la DIV contenant la map.

[oni13]

Eh bien pour la condition j'ai utilisé celle du tuto: if(e)... e étant le paramètre "event". Mais comme je l'ai remarqué, c'était simplement IE9 qui buguait

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ok pour offsetLeft et offsetTop mais à vrai dire c'est aussi que je n'arrivais pas à obtenir mes coordonnées (bonne ou pas) mais j'ai pas osé le dire

[Invité]

ie ne supporte pas pageX et page Y toutes versions confondu


pour etre compatible avec tous les navigateur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function getMousePosition(e){
 
var document_scroll=(navigator.vendor) ? document.body : document.documentElement;
 
e =(!e) ? window.event : s;
 
var posX =e.clientX + document_scroll.scrollLeft;
var posY =e.clientY + document_scroll.scrollTop;
}

[oni13]

ie ne supporte pas pageX et page Y toutes versions confondu


pour etre compatible avec tous les navigateur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function getMousePosition(e){
 
var document_scroll=(navigator.vendor) ? document.body : document.documentElement;
 
e =(!e) ? window.event : s;
 
var posX =e.clientX + document_scroll.scrollLeft;
var posY =e.clientY + document_scroll.scrollTop;
}

Le problème vient de e =(!e) ? window.event : s; car en gros IE9 prend ce test comme si il possédait l'event (car apparemment c'est le cas) mais justement il ne supporte pas pageX.
D'ou mon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (nomnav == 'Microsoft Internet Explorer')

[Invité]

en regardant j'ai fait une erreur il y a un s qu'il faut remplacer par e

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

e =(!e) ? window.event : e;

pour en revenir a ie 9 il supporte les deux syntaxes mais il vaut mieux préférer la syntaxe ou l'evenement est mis en parametre car c'est celle qui est couramment employé on fait donc le teste qui est de savoir si (e) n'est pas null sa permet de choisir automatique la solution precedement cité et on a pas besoin de tester le navigateur car on fait la difference entre ie 6 7 8 et les autres navigateurs ie 9 ff chrome ...etc donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (nomnav == 'Microsoft Internet Explorer')

sert a rien.

[oni13]

Si IE9 supporte les 2 syntaxes, pourquoi ce code ne fonctionne-t-il pas?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function getMousePosition(e){
 
if(e){
     document.getElementById('zone').innerHTML = e.pageX+20 ;
     document.getElementById('zone1').innerHTML = e.pageY;
}
else
{
 
	document.getElementById('zone').innerHTML = window.event.clientX + document.body.scrollLeft + 20;
	document.getElementById('zone1').innerHTML = window.event.clientY + document.body.scrollTop;
	}
}

J'ai inséré ton fonction, mais la prise en compte du sroll ne fonctionne pas (enfin si, mais que sous chrome). j'imagine que cela vient de mon doctype c'est ca?

PS: Dsl je répond un peu tard mais bon j'ai pas pu plus tot.

http://grignan-adhemar-vin.fr/new/f/vignerons.php

[Invité]

comme ca

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function getMousePosition(e){
 
var document_scroll=(navigator.vendor) ? document.body : document.documentElement;
 
e =(!e) ? window.event : e;
 
document.getElementById('zone').innerHTML =e.clientX + document_scroll.scrollLeft;
document.getElementById('zone1').innerHTML =e.clientY + document_scroll.scrollTop;
}

décapitage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var document_scroll=(navigator.vendor) ? document.body : document.documentElement;

cette ligne sert a différencier chrome et safari face aux autres navigateurs dans la gestion du scroll

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

e =(!e) ? window.event : e;

cette ligne sert a differencier Iinternet explorer 6 7 et 8 face aux autres navigateurs dans la gestion des evenement

[oni13]

Oui c'est exactement le code que j'ai inséré sur ma page (lien message précédent). La position de la souris fonctionne sur tous les navigateurs, mais pas la prise en compte du scroll. Donc le test de l'event marche, mais pas celui de différentiation pour le scrolling.

Cela ne fonctionne que sous chrome (et théoriquement safari)

[NoSmoking]

je te livre celle que j'utilise, la 259 éme donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
  //----------------------
  function getPosMouse( e){
    e = e || event;
    var dE = document.documentElement,
        dB = document.body;
    var mX = e.pageX || ( event.clientX +( dE && dE.scrollLeft || dB && dB.scrollLeft || 0) -( dE.clientLeft || 0));
    var mY = e.pageY || ( event.clientY +( dE && dE.scrollTop  || dB && dB.scrollTop  || 0) -( dE.clientTop  || 0));
    return({ x : mX, y : mY});
  }

mais pourquoi ne pas utiliser cette de la ?

[oni13]

Par contre, le script de l'exemple ne fonctionnait pas chez moi, plus particulierement la conditiond de présence de l'évènement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if(e){
        ...
}
    else{

je n'entrais jamais dans le else, j'ai donc mis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getMousePosition(e){
var nomnav = navigator.appName;
 
if(e){
     document.getElementById('zone').innerHTML = e.pageX+20 ;
     document.getElementById('zone1').innerHTML = e.pageY;
}
if (nomnav == 'Microsoft Internet Explorer')
{
 
	document.getElementById('zone').innerHTML = window.event.clientX + document.body.scrollLeft + 20;
	document.getElementById('zone1').innerHTML = window.event.clientY + document.body.scrollTop;
	}
}

De plus, utiliser la variable:
var monBody = document.documentElement || document.body;

ne fonctionnait pas, bizarre... j'ai donc fais sans et utilisé directement document.body

Par "exemple" je voulais dire FAQ.
Cette fonction là marche niquel :O !
Elle prend en compte suffisamment de paramètres je pense, j'avais réussi à faire marcher mon script mais avec la condition qui "sert à rien" de repérage de IE.

Merci bien pour tout cela !