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

Version imprimable

01/02/2006, 20h42
frechy

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

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...
02/02/2006, 09h17
siddh

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 ;)
02/02/2006, 10h41
denisC

Re: Connaitre la position d'un curseur (px) dans un tableau

Citation:

Envoyé par frechy

Mais je ne vois pas comment faire pour un tableau.

Va voir la :faq:

Citation:

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 :faq:

:mrgreen:
03/02/2006, 14h29
frechy

Pfff le :boulet: , j'ai meme pas été voir dans la FAQ :oops: :oops: :oops:

Je recommencerai plus :scarymov:

Enfin merci, mon problème est résolu
03/02/2006, 14h51
frechy
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:

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.

Il faut corriger avec la position de la page:
Code:

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 :)

03/02/2006, 15h13
frechy

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

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:

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

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...

05/02/2006, 19h41
frechy

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.

:help:

Citation:

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:

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?

Je vais mettre mon code html et javascript.

page php:

Code:

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:

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

09/02/2006, 20h28
frechy

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

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

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

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 :wink:

Pour info, la page qui marche:
Code:

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;"> </td> </tr> </tbody> </table> <div id="tooltip" style="background-color:white; border:solid 1px #000000; visibility:hidden;"></div> </body> </html>

10/02/2006, 15h10
frechy

:hola: :hola: :hola: Mon sauveur :lol:

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

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:

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.