Info-bulle

Version imprimable

Info-bulle

Bonjour,

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

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

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 8O
Page test

Auriez-vous des solutions ?

Merci d'avance.

30/12/2005, 16h39
Linaa

Bizarrement, en rajoutant la doctype, ça fonctionne un peu mieux...
Mais l'info-bulle reste statique... Page
30/12/2005, 17h09
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 :)
30/12/2005, 19h55
siddh

salut,
il faut ABSOLUMENT mettre des px pour tes top et left,
rajoutes les en faisant des +"px" ;)
30/12/2005, 23h21
Linaa

Citation:

Envoyé par siddh

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 !

Citation:

Envoyé par denisC

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.

en mettant juste ça dans move :

Code:

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

Citation:
Envoyé par siddh
en mettant juste ça dans move :
Code:

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!

31/12/2005, 10h58
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:

1 2 3 4 else { document.getElementById(ma_bulle).style.left = "20px"; document.getElementById(ma_bulle).style.top = "20px";
31/12/2005, 12h23
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 :mrgreen:
31/12/2005, 12h59
Linaa

Citation:

Envoyé par torvalds17

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

Oui... :D

Merci beaucoup !!