Discussion :

[Linaa]

Bonjour,

mon code javascript pour afficher l'info-bulle est le suivant

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
// Variables globales
var ma_bulle;
var netscape = "t";
 
// Detection du passage de la souris sur l'image
function detect(span) {
	ma_bulle = span;
	// Autres que IE
	if (navigator.appName != "Microsoft Internet Explorer") {
		document.captureEvents(Event.MOUSEMOVE);
	}
	else
		netscape = "f";
	document.onmousemove = move;
}
 
function move(e) {
	// IE
	if (netscape == "f") {
		document.getElementById(ma_bulle).style.left = event.x + document.body.scrollLeft+15;
		document.getElementById(ma_bulle).style.top = event.y + document.body.scrollTop+15;
		window.status = "x : "+event.x+", y : "+event.y;
	}
	// Autres
	else {
		document.getElementById(ma_bulle).style.left = e.pageX +15;
		document.getElementById(ma_bulle).style.top = e.pageY+15;
		window.status = "x:"+e.pageX+", y : "+e.pageY;
	}
}

Le HTML qui va avec :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1" align="center">
		<td>
			<a href="#" class="bulle" onmouseover="detect('sp')">
				mon texte 
				<span id="sp">la bulle qui<br />va avec...</span>
			</a>
		</td>
		<td>
			<a href="#" class="bulle" onmouseover="detect('sp2')">
				blabla
				<span id="sp2">la bulle2 qui<br />va avec...</span>
			</a>
		</td>
	</table>

Mon problème est que ça ne fonctionne pas correctement sous Firefox.
(Sous IE, ça fonctionne bien...)
Il y a un grand décalage entre le pointeur de la souris et mon info-bulle
Page test

Auriez-vous des solutions ?

Merci d'avance.

[Linaa]

Bizarrement, en rajoutant la doctype, ça fonctionne un peu mieux...
Mais l'info-bulle reste statique... Page

[denisC]

Je ne peux que te conseiller le script de Torvalds:
http://torvalds17.free.fr/partiePubl....php5?script=1 qui fonctionne. Inspire t'en pour trouver ton problème

[siddh]

salut,
il faut ABSOLUMENT mettre des px pour tes top et left,
rajoutes les en faisant des +"px"

[Linaa]

salut,
il faut ABSOLUMENT mettre des px pour tes top et left,
rajoutes les en faisant des +"px"

En rajoutant le px, c'est un peu mieux, l'info-bulle n'est plus statique, mais toujours décalée !

Je ne peux que te conseiller le script de Torvalds:
http://torvalds17.free.fr/partiePublique/informatique/scripts/index.php5?script=1 qui fonctionne. Inspire t'en pour trouver ton problème

Oui, je l'ai fait, mais j'vois pas d'où vient mon problème...
Si ce n'est le JS, ça vient surement du CSS. J'vais fouillé de ce côté là.

Merci.

[siddh]

en mettant juste ça dans move :

Code :

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

1
2
3
document.getElementById(ma_bulle).style.left = parseInt(event.x + document.body.scrollLeft+15,10)+"px";
		document.getElementById(ma_bulle).style.top = parseInt(event.y + document.body.scrollTop+15,10)+"px";
		window.status = "x : "+event.x+", y : "+event.y;

y a un ti reglage pour firefox a faire

[Linaa]

en mettant juste ça dans move :

Code :

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

1
2
3
document.getElementById(ma_bulle).style.left = parseInt(event.x + document.body.scrollLeft+15,10)+"px";
		document.getElementById(ma_bulle).style.top = parseInt(event.y + document.body.scrollTop+15,10)+"px";
		window.status = "x : "+event.x+", y : "+event.y;

y a un ti reglage pour firefox a faire

Ne fonctionne pas non plus
D'ailleurs pour Firefox, ce n'est pas event.x (event.y), mais event.pageX (event.pageY).

Merci pour ton aide!

[siddh]

en fait avec ton fonctionnement, il part toujours de ta case de tableau (surement a cause du :hover span) comme base de calcul
du coup :

Code :

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

1
2
3
4
else {
 
      document.getElementById(ma_bulle).style.left = "20px";
      document.getElementById(ma_bulle).style.top = "20px";

[Invité]

comme dit siddh, la bulle part des cases de ton tableau. c'est donc qu'elle herite du caractère relatif du positionnement de ta case de tableau. si tu enleves le position:relative de ton style "bulle", ça fonctionne

[Linaa]

comme dit siddh, la bulle part des cases de ton tableau. c'est donc qu'elle herite du caractère relatif du positionnement de ta case de tableau. si tu enleves le position:relative de ton style "bulle", ça fonctionne

Oui...

Merci beaucoup !!