Discussion :

[Ghunter59]

Bonjour,

Je suis actuellement en train de développer un site pour lequl je crée des infos bulles sur la page d'accueil. Je fais ceci au moyen d'un scritp JS et tout fonctionne correctement sous IE et FF en versions inférieures à 3.5. Seulemet lorsque l'on est sous FF 3.5 ou supérieurs, l'info bulle clignote, elle ne s'affiche pas correctement...

Voici mon code JS :

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
var xOffset=-180
var yOffset=0
 
var affiche = false; // La variable i nous dit si le bloc est visible ou non
var w3c=document.getElementById && !document.all;
var ie=document.all;
 
if (ie||w3c) {
	var laBulle
}
 
function ietruebody(){ // retourne le bon corps...
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function deplacer(e) {
	if(affiche){
		var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
		var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
 
		var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
		var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
 
		var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
		var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
 
		var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
 
		// modifier la largeur de l'objet s'il est trop grand...
		if(laBulle.offsetWidth > winwidth / 3){
			laBulle.style.width = winwidth / 3
		}
 
		// si la largeur horizontale n'est pas assez grande pour l'info bulle
		if(rightedge < laBulle.offsetWidth){
			// bouge la position horizontale de sa largeur à gauche
			laBulle.style.left = curX - laBulle.offsetWidth + "px"
		} else {
			if(curX < leftedge){
				laBulle.style.left = "5px"
			} else{
				// la position horizontale de la souris
				laBulle.style.left = curX + xOffset + "px"
			}
		}
 
		// même chose avec la verticale
		if(bottomedge < laBulle.offsetHeight){
			laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
		} else {
			laBulle.style.top = curY + yOffset + "px"
		}
	}
}
function showTooltip(text) {
	if (w3c||ie){
		laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : ""
		laBulle.innerHTML = text; // fixe le texte dans l'infobulle
		laBulle.style.visibility = "visible"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
		affiche = true;
	}
}
function hideTooltip() {
	if (w3c||ie){
		affiche = false
		laBulle.style.visibility="hidden" // avoid the IE6 cache optimisation with hidden blocks
		laBulle.style.top = '-100000px'
		laBulle.style.backgroundColor = ''
		laBulle.style.width = ''
	}
}
 
document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.

Sauriez vous me dire d'où viens l'erreur ?

Pensez vous que ça puisse venir du changement du moteur javascript qui a été opéré chez firefox dès la version 3.5 ? si oui quelle peut être la solution pour contourner ce problème ?

Merci d'avance !

[SpaceFrog]

Non je pense que cela provient d'un légère incompatibilité de code...
par contre pour la repérer c'est une autre paire de manches ...

regarde plutot du coté de http://www.walterzorn.com/tooltip/tooltip_e.htm
elles ne clignotent pas

[Ghunter59]

Salut,

Merci pour ta réponse, ca fonctionne niquel !

Encore merci.