Connaitre la position d'un curseur (px) dans un tableau [Fait]

**frechy** · 01/02/2006, 20h42

Bonjour à tous,

Je cherche à connaitre la position (en pixel) du curseur dans un tableau, en sachant que le point 0,0 devrait être situé en haut à gauche.

Le tableau est de taille fixe (100px * 100px), ne comporte qu'une ligne et qu'une colonne.

Le tableau est centré sur la page et n'est donc pas fixé sur la page (varie en fonction de la résolution d'écran).

Actuellement je sais obtenir la position du curseur sur la page(avec event.x et event.y).

Mais je ne vois pas comment faire pour un tableau.

Merci pour votre aide

PS: Il me faudrait une solution compatible tout browser, je ne sais meme pas si event.x est compatible...

**siddh** · 02/02/2006, 09h17

récupère la position de la table et celle du pointeur dans la page et tu en deduit celle du curseur par rapport a la table

**denisC** · 02/02/2006, 10h41

Envoyé par frechy

Mais je ne vois pas comment faire pour un tableau.

Va voir la

Envoyé par frechy

PS: Il me faudrait une solution compatible tout browser, je ne sais meme pas si event.x est compatible...

Va aussi voir la

**frechy** · 03/02/2006, 14h29

Pfff le

, j'ai meme pas été voir dans la FAQ

Je recommencerai plus

Enfin merci, mon problème est résolu

**frechy** · 03/02/2006, 14h51

Finalement ce n'est pas résolu

Ca fonctionne très bien pour un tableau de 100 sur 100 qui reste sur la page.

Mais si j'ai un tableau qui déborde et dont on ne voit pas le coin supérieur gauche, alors la valeur retournée n'est pas celle du coin du tableau. C'est en fait la partie visible...

En utilisant les fonctions de la FAQ, j'ai créé une petite fonction;

Code :

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

1
2
3
4
5
6
7
function convertpix(x,y)
{
	var ligne = y - calculeOffsetTop(pixtab);
	var col   = x - calculeOffsetLeft(pixtab);
 
	return "ligne:"+ligne+"</br>col"+col;
}

le x et y sont les coordonnées de la souri.

J'espere qu'il y a une solution.

**denisC** · 03/02/2006, 15h08

Il faut corriger avec la position de la page:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
if (window.innerHeight)
{
  pos = window.pageYOffset
}
else if (document.documentElement && document.documentElement.scrollTop)
{
pos = document.documentElement.scrollTop
}
else if (document.body)
{
  pos = document.body.scrollTop
}

pos te donnera la quantité de scrolling vertical de la page. A toi de voir si il faut ajouter ou enlever ce chiffre.... Et faire la même chose pour l'horizontal.

Bonne chance

**frechy** · 03/02/2006, 15h13

oki merci, j'essaye tantot, en esperant que c est independant du style windows, du browser,...

**frechy** · 03/02/2006, 18h55

Je viens d'essayer, ca fonctionne pour le scroll verticale, merci. Pas encore testé l'horizontal.

En fait je viens de testé sous firefox et le code de la FAQ ne semble fonctionner qu'à moitier...

La fonction calculeOffsetTop renvoi bien une valeur sous ie et firefox.

Par contre la fonction calculeOffsetLeft renvoi toujours 0 sous firefox

Je vais vous montrer l'appel à la fonction et le code correspondant (de la FAQ)

Code :

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

calculeOffsetLeft(document.getElementById('pixtab'));

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function calculeOffsetLeft(r){
  return calculeOffset(r,"offsetLeft")
}
 
function calculeOffset(element,attr){
  var offset=0;
  while(element){
    offset+=element[attr];
    element=element.offsetParent
  }
  return offset
}

Je supose que "offsetLeft" n'est pas reconnu par firefox, ou compris autrement...

**frechy** · 05/02/2006, 19h41

UP

Je fais remonter le msg...

Personne ne sait me dire pourquoi firefox ne prend pas le code?

Enfin quand je regarde dans la console javascript; aucune erreur, donc il le traite bien, mais il doit l'interpreter d'une autre facon.

**denisC** · 07/02/2006, 10h25

Envoyé par frechy

Je supose que "offsetLeft" n'est pas reconnu par firefox, ou compris autrement...

J'avoue mon incompréhension. Le code ci-dessous fonctionne parfaitement, sous Firefox:

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
 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Test ---</title>
        <script type='text/javascript'>
function calculeOffsetLeft(r){
    return calculeOffset(r,"offsetLeft")
}
 
function calculeOffset(element,attr){
  var offset=0;
  while(element){
    offset+=element[attr];
    element=element.offsetParent
  }
  return offset
}
    </script>
    </head>
    <body>
        <p id="dd1">BLablabla</p>
        <p id="dd2" style="margin-left:50px">BLablabla</p>
        <input type='button' value="Click Me!!" onclick='alert(calculeOffsetLeft(document.getElementById("dd1")));alert(calculeOffsetLeft(document.getElementById("dd2")))'
    </body>
</html>

Il doit donc s'agir d'un problème spécifique à ta page.

Tu peux nous en montrer le code HTML?

**frechy** · 07/02/2006, 13h26

Je vais mettre mon code html et javascript.

page php:

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
<html>
<head>
<title>Document sans titre</title>
<STYLE type=text/css>
.tooltip {
	VISIBILITY: hidden
}
</STYLE>
<SCRIPT src="fctjscript.js" type=text/javascript></SCRIPT>
<LINK href="stylecss.css" type=text/css rel=stylesheet>
 
</head>
 
<body bgcolor="#666666" marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0">
 
 
<table id="pixtab"  width="100" height="100" align="center" bgcolor="#CCCCCC" cellpadding="0" cellspacing="0" onMouseOut="rollOut()">
 
  <tr>
 
    <td class="tdstyle" onClick="Reserv(1,1)" onMouseOver="rollOn('')"></td>
 
  </tr>
 
 
</table>
 
<div id="tooltip" style="background-color:white; border:solid 1px #000000; visibility:hidden;"></div>
 
</body>
</html>

Les fonctions javascripts:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
var icon; 
 
function convertpix(x,y)
{
	var col   = GetC(x);
	var ligne = GetL(y);
 
	return "ligne:"+ligne+"</br>col"+col;	
}
 
function rollOn(txt) { 
   icon = document.getElementById('tooltip'); 
 
   icon.style.position='absolute'; 
   icon.style.visibility = 'visible'; 
 
   if (navigator.appName != "Microsoft Internet Explorer") { 
      document.captureEvents(Event.MOUSEMOVE); 
   } 
   document.onmousemove = go; 
} 
 
function go(e) { 
   if (navigator.appName == 'Microsoft Internet Explorer') { 
 
   	  icon.innerHTML = convertpix(event.x,event.y);
      icon.style.left = event.x+document.body.scrollLeft+15+"px"; 
      icon.style.top = event.y+document.body.scrollTop+15+"px"; 
   } 
   else { 
      icon.innerHTML = convertpix(e.pageX,e.pageY);
	  icon.style.left = e.pageX +15+"px"; 
      icon.style.top = e.pageY+15+"px"; 
   } 
} 
 
function rollOut() { 
      icon.style.visibility='hidden'; 
} 
 
function Reserv(l,c) {
var adr="reserv.php?l="+l+"&c="+c;
window.location.replace(adr);
}
 
function calculeOffsetLeft(r){
  return calculeOffset(r,"offsetLeft")
}
 
function calculeOffsetTop(r){
  return calculeOffset(r,"offsetTop")
}
 
function calculeOffset(element,attr){
  var offset=0;
  while(element){
    offset+=element[attr];
    element=element.offsetParent
  }
  return offset
}
 
function scrolVert()
{
	if (window.innerHeight) 
	{ 
	  pos = window.pageYOffset 
	} 
	else 
		if (document.documentElement && document.documentElement.scrollTop) 
		{ 
			pos = document.documentElement.scrollTop 
		} 
		else 
			if (document.body) 
			{ 
			  pos = document.body.scrollTop 
			} 
	return pos;
}
 
function GetL(y)
{
	return y - calculeOffsetTop(document.getElementById('pixtab'));
}
 
function GetC(x)
{
	return x - calculeOffsetLeft(document.getElementById('pixtab'));
}

Bon il y a pas mal de fonction, j'aime bien découper lol, puis il y a d'autres fonctions qui n'ont rien à voir avec le problème. Enfin j'ai tout laissé au cas où une fonction interfererait.

Pour vous aider, voici l'ordre d'execution des fonctions:

rollOn -> go(e) -> convertpix ->GetC -> calculeOffsetLeft
_______________________->GetL -> calculeOffsetTop

**frechy** · 09/02/2006, 20h28

Personne ne sait me dire d'où pourrait venir le problème?

Je ne vais quand meme pas abandonner juste à cause d'un ^$*ù$^ de browser

**denisC** · 10/02/2006, 09h10

J'ai testé et j'ai trouvé la solution

Bon, d'abord, tout tes types; il doivent être mis entre ', sinon Firefox pas content.

Ensuite si ta cellule ne contient rien, Firefox la réduit, et elle ne prends aucune place, dnoc le script rollOn n'est jamais appelé: il faut mettre un   dans ta cellule (mais je suppose que c'est juste pour l'exemple, tu peux mettre une couleur de fond à la cellule pour vérifier ça).

Enfin, pour le bug proprement dit. (enfin, c'est pas un bug, mais un comportement à prendre en compte). Pour firefox, l'offsetLeft d'un élement c'est le décalage par rapport à l'élement précédent de l'élement compris au sens contenu+border+margin. Donc ton tableau, il a bien un offsetLeft (et Top) de 0, car sa marge est calée sur le body de la page.

C'est bien drole tout ça, mais c'est pas pratique.

D'où la solution pour contourner: rajouter un tbody dans ta table (de toute façon c'est normalement obligatoire d'après la norme HTML 4.0). A ce moment, ton tbody a bien le bon offset par rapport à la table, et la table est collée au body. et tu retrouves tes coordonnées comme tu le veux

Pour IE, ça ne change rien, ça marche toujours pareil, avec un décalage de 2px

(bug connu).

Et voila, bonne chance

Pour info, la page qui marche:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Test frechy</title>
        <STYLE type='text/css'>
.tooltip {
   VISIBILITY: hidden
}
</STYLE>
        <script type='text/javascript'>
var icon;
 
function convertpix(x,y)
{
   var col   = GetC(x);
   var ligne = GetL(y);
 
   return "ligne:"+ligne+"</br>col"+col;
}
 
function rollOn(txt) {
   icon = document.getElementById('tooltip');
 
   icon.style.position='absolute';
   icon.style.visibility = 'visible';
 
   if (navigator.appName != "Microsoft Internet Explorer") {
      document.captureEvents(Event.MOUSEMOVE);
   }
   document.onmousemove = go;
}
 
function go(e) {
   if (navigator.appName == 'Microsoft Internet Explorer') {
 
        icon.innerHTML = convertpix(event.x,event.y);
      icon.style.left = event.x+document.body.scrollLeft+15+"px";
      icon.style.top = event.y+document.body.scrollTop+15+"px";
   }
   else {
      icon.innerHTML = convertpix(e.pageX,e.pageY);
     icon.style.left = e.pageX +15+"px";
      icon.style.top = e.pageY+15+"px";
   }
}
 
function rollOut() {
      icon.style.visibility='hidden';
}
 
function Reserv(l,c) {
var adr="reserv.php?l="+l+"&c="+c;
window.location.replace(adr);
}
 
function calculeOffsetLeft(r){
  return calculeOffset(r,"offsetLeft")
}
 
function calculeOffsetTop(r){
  return calculeOffset(r,"offsetTop")
}
 
function calculeOffset(element,attr){
  var offset=0;
  while(element){
    offset+=element[attr];
    element=element.offsetParent;
  }
  return offset
}
 
function scrolVert()
{
   if (window.innerHeight)
   {
     pos = window.pageYOffset
   }
   else
      if (document.documentElement && document.documentElement.scrollTop)
      {
         pos = document.documentElement.scrollTop
      }
      else
         if (document.body)
         {
           pos = document.body.scrollTop
         }
   return pos;
}
 
function GetL(y)
{
   return y - calculeOffsetTop(document.getElementById('pixtab'));
}
 
function GetC(x)
{
   return x - calculeOffsetLeft(document.getElementById('pixtab'));
}
    </script>
    </head>
<body bgcolor="#666666" marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0">
 
 
<table width="100" height="100" bgcolor="#CCCCCC" cellpadding="0" cellspacing="0" onMouseOut="rollOut()" style="margin-left:auto; margin-right:auto; margin-top:20px;">
<tbody id="pixtab">
 
  <tr>
 
    <td class="tdstyle" onClick="Reserv(1,1)" onMouseOver="rollOn('')" style="background-color:yellow;">&nbsp;</td>
 
  </tr>
 
</tbody>
</table>
 
<div id="tooltip" style="background-color:white; border:solid 1px #000000; visibility:hidden;"></div>
 
</body>
</html>

**frechy** · 10/02/2006, 15h10

Mon sauveur

Je test ca de suite

Note que pour le bug de 2px sous IE il me semble que j'avais ce bug en local mais pas lorsque le fichier est online...je dois encore vérifier

**frechy** · 10/02/2006, 15h39

Voilà tout fonctionne, pour info pas de bug de 2px. Je pense que ce bug en local est du au fait que l'on doive accepter un avertissement de sécurité qui empeche les codes javascript.

Pour ceux que ca interesse, je tappe le bou de code correspondant au scrol. En fait il n'y a que IE qui doit le prendre en compte, firefox n'en a pas besoin.

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
function scrolVert()
{
	if (navigator.appName == 'Microsoft Internet Explorer') {
	if (window.innerHeight) 
	{ 
	  pos = window.pageYOffset 
	} 
	else 
		if (document.documentElement && document.documentElement.scrollTop) 
		{ 
			pos = document.documentElement.scrollTop 
		} 
		else 
			if (document.body) 
			{ 
			  pos = document.body.scrollTop 
			} 
	return pos;
	}
	else
	{
		return 0;
	}
}
 
 
function scrolHor()
{
	if (navigator.appName == 'Microsoft Internet Explorer') {
	if (window.innerWidth) 
	{ 
	  pos = window.pageXOffset 
	} 
	else 
		if (document.documentElement && document.documentElement.scrollLeft) 
		{ 
			pos = document.documentElement.scrollLeft 
		} 
		else 
			if (document.body) 
			{ 
			  pos = document.body.scrollLeft 
			} 
	return pos;
	}
	else
	{
		return 0;
	}
}
 
 
function GetL(y)
{
	return y - calculeOffsetTop(document.getElementById('pixtab')) + scrolVert();
}
 
function GetC(x)
{
	return x - calculeOffsetLeft(document.getElementById('pixtab')) + scrolHor();
}

Un grand merci pour ton aide en tout cas.

Connaitre la position d'un curseur (px) dans un tableau [Fait]

JavaScript

Discussions similaires

Partager

Partager