Discussion :

[Isidore.76]

Bonjour,

Pour prendre en charge des évènements coté client, j'ai pour habitude d'utiliser une fonction maison, nommée AddListener, fortement inspirée de ce que l'on peut trouver aisément sur le web.

Je souhaite l'utiliser pour qu'une bulle d'aide soit affichée au passage de la souris sur certains items de la page. Aussi je procède de la façon suivante :

AddListener( 'dg_ctl12_labCodeArticle', 'mouseover', BulleAfficher );

La fonction BulleAfficher ressemblant fortement à ceci :

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
function BulleAfficher( evt  )
{
    var target = evt.target || evt.srcElement;
    ...
    var x = evt ? evt.clientX : window.event.clientX;
    var y = evt ? evt.clientY : window.event.clientY;
    ...
    // div_bulle  == balise div contenant la "bulle"
    // balise obtenue par un moyen que je ne détaille pas içi
    // x est décrémenté de div_bulle.offsetWidth de sorte que le 
    // coin haut droit de la bulle soit positionné à proximité du curseur
    x -= div_bulle.offsetWidth + 8;
    y += 6;
    ...
    div_bulle.style.left = x + 'px';
    div_bulle.style.top = y + 'px';
    div_bulle.style.visibility = 'visible';
}

Ce qui me chagrine, dans ce code, c'est que la bulle n'est plus correctement positionnée

Si l'utilisateur réduit la fenêtre de son navigateur de sorte qu'il lui faille utiliser son "ascenseur horizontal" pour rendre visible l'item dont le survol doit provoquer l'affichage de la bulle,
Alors la bulle n'est pas positionnée correctement (le calcul pour le left est 'faux' : il n'y a pas de prise en compte du scroll)

Avez-vous une solution à ce problème ?

[Matthieu2000]

http://javascript.developpez.com/faq...nt#SourisCoord

[gyzmau]

Re Isidore

Essai ceci:
pour IE:

Code :

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

1
2
event.x + document.body.scrollLeft
event.y + document.body.scrollTop

peut etre aaussi besoin de document.documentElement.scrollLeft et top mais a voir suivant ou tu veux positionner

pour le reste

Code :

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

1
2
evt.pageX
evt.pageY

[Isidore.76]

Fonctionne sous FireFox 3, IE7, Opéra 9.24, Safari 3.1, le tout sous Windows XP :

Code :

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

1
2
3
4
 
    var x = (evt ? evt.clientX : window.event.clientX) + (document.body.scrollLeft || document.documentElement.scrollLeft);
 
    var y = (evt ? evt.clientY : window.event.clientY) + (document.body.scrollTop || document.documentElement.scrollTop);

De fait, je ne suis pas tout à fait certain que la FAQ réponde vraiment à la question, au moins dans toutes les situations...?

[Oscar Hiboux]

Bon ben ça marche ? C'est résolu ?

[Sub0]

J'utilise ce genre de code, la position de la souris est retournée dans (PosX,PosY) :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
var iev=document.all;
if(!iev) var mov=document.getElementById;
if(!mov&&!iev) alert("Application incompatible avec votre navigateur!");
 
var PosX,PosY;
 
//====================================================//
// Supprime le "px" en fin de chaîne -> nombre
//====================================================//
function nbr(nombrepx){
  if(nombrepx){
    if(nombrepx.length>=3)
      if(nombrepx.substr(nombrepx.length-2,2)=="px")
        return (nombrepx.substr(0,nombrepx.length-2))*1;
    return nombrepx*1;
  }
  return 0;
}
 
//====================================================//
// Retourne la valeur du scroll
//====================================================//
function GetScrollX(){
  if(mov) return nbr(document.body.scrollLeft); 
  if(document.documentElement.scrollLeft)
    return nbr(document.documentElement.scrollLeft);else 
    return nbr(document.body.scrollLeft); 
}
 
//====================================================//
function GetScrollY(){
  if(mov) return nbr(document.body.scrollTop);
  if(document.documentElement.scrollTop)
    return nbr(document.documentElement.scrollTop);else 
    return nbr(document.body.scrollTop); 
}
 
 
//====================================================//
// Détection des coordonnées de la souris
//====================================================//
function MyMousePosX(evenement){
  if(mov) return nbr(evenement.clientX)+GetScrollX();
  return nbr(window.event.x)+GetScrollX()-2;
}
 
//====================================================//
function MyMousePosY(evenement){
  if(mov) return nbr(evenement.clientY)+GetScrollY();
  return nbr(window.event.y)+GetScrollY()-2;
}
 
 
//====================================================//
// Souris en mouvement
//====================================================//
function Position(evenement){
  PosX=MyMousePosX(evenement);
  PosY=MyMousePosY(evenement);
}
 
//====================================================//
// INITIALISATION
//====================================================//
document.onmousemove=Position;

[Sub0]

???