Discussion :

[leodi]

Bonjour à tous,

J'ai un script pour afficher une infobulle au passage de la souris sur un objet, mais celui ci ne fonctionne pas comme je le désirerais.
Il s'affiche bien, avec le texte donné, mais pas aux bonnes coordonées.
N'ayant casiment aucune conaissance en javascript, je requiers donc vontre aide :
Le problème est le suivant, j'ai ce bout de code, servant a afficher ma "bulle"

Code :

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

1
2
3
4
    document.getElementById("bulle").innerHTML=contenu;
    document.getElementById("bulle").style.top=100;
    document.getElementById("bulle").style.left=100;
    document.getElementById("bulle").style.visibility="visible";

Donc la première et la dernière fonction fonctionnent, mais pour ce qui est du placement de la bulle dans la page, elle reste à (0;0), j'imagine donc qu'il y a un problème quelque part...


Merci d'avance !

[Auteur]

bonsoir,

tu as oublier de définir la position de ta bulle. Par contre je te déconseille d'utiliser le style "visibility" : en effet dans ce cas ta bulle n'est pas retirée de la page, utilise plutôt la propriété "display".

Voici un exemple de style que tu peux appliquer :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
display: none;
position: absolute;
z-index : 1;
 
width: 160px;
background-color: #F4F49C;
padding: 2px;
margin: 2px;
border-style: ridge;
border-width: 3px;
border-color: #F4F49C;
font-family: Arial;
font-size: 8pt;

et lors de l'événement appelle ta fonction.
Affiche d'abord ta bulle avant de la positionner dans la page

Code :

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

1
2
3
4
5
6
 
 var maBulle = document.getElementById("bulle");
 maBulle.innerHTML=contenu;
 maBulle.style.display="block"; 
 maBulle.style.top=100;
 maBulle.style.left=100;

[leodi]

Merci pour votre aide

Mon script est un script récupérer sur internet, le voici entièrement :

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
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
 
var IB=new Object;
var posX=50;
var posY=50;
var xOffset=10;yOffset=25;
function AffBulle(texte) {
  contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE>";
  var finalPosX=posX-xOffset;
  if (finalPosX<0) finalPosX=0;
  if (document.layers) {
    document.layers["bulle"].document.write(contenu);
    document.layers["bulle"].document.close();
    document.layers["bulle"].top=posY+yOffset;
    document.layers["bulle"].left=finalPosX;
    document.layers["bulle"].visibility="show";}
  if (document.all) {
    //var f=window.event;
    //doc=document.body.scrollTop;
    bulle.innerHTML=contenu;
    document.all["bulle"].style.top=posY+yOffset;
    document.all["bulle"].style.left=finalPosX;//f.x-xOffset;
    document.all["bulle"].style.visibility="visible";
  }
  //modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
  else if (document.getElementById) {
///////////////////////////////////////////////
///////////////////////////////////////////////
var maBulle = document.getElementById("bulle");
 maBulle.style.visibility="visible";
 maBulle.innerHTML=contenu;
 maBulle.style.display="block";
 maBulle.style.top=100;
 maBulle.style.left=100; 
 
    //document.getElementById("bulle").innerHTML=contenu;
    //document.getElementById("bulle").style.top=posY+yOffset; // C'est ca a la base mais pour les tests j'ai mis 100
    //document.getElementById("bulle").style.left=finalPosX;
    //document.getElementById("bulle").style.top=100;
    //document.getElementById("bulle").style.left=100;
 
///////////////////////////////////////////////
///////////////////////////////////////////////   
  }
}
function getMousePos(e) {
  if (document.all) {
  posX=event.x+document.body.scrollLeft; //modifs CL 09/2001 - IE : regrouper l'évènement
  posY=event.y+document.body.scrollTop;
  }
  else {
  posX=e.pageX; //modifs CL 09/2001 - NS6 : celui-ci ne supporte pas e.x et e.y
  posY=e.pageY;
  }
}
function HideBulle() {
	if (document.layers) {document.layers["bulle"].visibility="hide";}
	if (document.all) {document.all["bulle"].style.visibility="hidden";}
	else if (document.getElementById){document.getElementById("bulle").style.visibility="hidden";}
}
 
function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
	IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
	if (document.layers) {
		window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
		document.write("<LAYER name='bulle' top=0 left=0 visibility='hide'></LAYER>");
	}
	if (document.all) {
		document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
		document.onmousemove=getMousePos;
	}
	//modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
	else if (document.getElementById) {
	        document.onmousemove=getMousePos;
	        document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
	}
}
document.onmouseover = function ( e )
{
	if ( !e ) e = window.event;
	var el = e.target ? e.target : e.srcElement;
	while ( el != null && el.tagName != "A" ) el = el.parentNode;
	if ( el == null ) return;
	if ( e.preventDefault ) e.preventDefault();
	else e.returnValue = true;
}
</script>

N'ayant que quelques notions en javascript, je n'ai pas réussit à réadapter votre code entièrement, et ma bulle ne s'affiche toujours pas aux bonnes coordonnées. Si vous pouriez m'apporter quelques précisions suplémentaires...

En tout cas merci poru votre aide

[Auteur]

hummm, ton code me semble bien agé.... Je crois que Netscape n'utilise plus la balise <layer>. Que les plus expérimentés me confirment cette affirmation


voici un code qui peut te rendre service : il fonctionnne plutôt bien sous IE et Firefox. Je ne l'ai pas testé sur d'autres navigateurs :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#Bulle{
width: 160px;
display: none;
position: absolute;
z-index : 1;
background-color: #F4F49C;
padding: 2px;
margin: 2px;
border-style: ridge;
border-width: 3px;
border-color: #F4F49C;
font-family: Arial;
font-size: 8pt;
}
 
#idDiv1, #idDiv2{
background-color: #B3C2A1;
padding: 10px;
}
#idDiv1{
width: 150%;
}
#idDiv2{
width: 220px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function MouseOver(ev)
{
var Xdoc, Xfen, Ydoc, Yfen, htDiv, lgDiv, dX, dY;
 
var el=document.getElementById("Bulle");
 
//on affiche la boite de dialogue pour evaluer ses dimensions.
if (el.style.display!="inline")
	 el.style.display="inline";
 
//hauteur et largeur de la bulle
htDiv = el.offsetHeight;
lgDiv = el.offsetWidth;
 
//delta de la bulle sous la souris
dY=10;
dX=10;
 
//position de la souris :
Xfen = ev.clientX;
Xdoc = Xfen + document.body.scrollLeft;
 
Yfen = ev.clientY;
Ydoc = Yfen + document.body.scrollTop;
 
//position de la bulle dans la page :
if ((Xfen + lgDiv + dX) > document.body.clientWidth)
  el.style.left = document.body.clientWidth + document.body.scrollLeft - lgDiv;
else
	el.style.left = Xdoc + dX;
 
if ((Yfen + htDiv + dY) > document.body.clientHeight)
  el.style.top = document.body.clientHeight + document.body.scrollTop - htDiv;
else
	el.style.top = Ydoc + dY;
 
//contenu de la bulle :
el.innerHTML = " Xdoc= "+Xdoc+" px ; Ydoc= "+Ydoc+" px<br>";
el.innerHTML+= " Xfen= "+Xfen+" px ; Yfen= "+Yfen+" px";	
 
}
 
function MouseOut()
{
//on cache la bulle
 document.getElementById("Bulle").style.display = "none";
}
//-->
</script>
 
</head>
 
<body>
<div id="Bulle">Mon info-bulle</div>
 
<div id="idDiv1" onmousemove="MouseOver(event)" onmouseout="MouseOut()">
ici l&rsquo;info bulle se d&eacute;place avec la souris lorsque vous survolez ce
paragraphe... <br>
Déplacer l&rsquo;ascenseur horizontal et repositionnez la souris sur le paragraphe.
Lisez Xdoc et Xfen.... ;-)
</div>
<br><br><br>
<div id="idDiv2" onmouseover="MouseOver(event)" onmouseout="MouseOut()">
par contre ici, l&rsquo;info-bulle appara&icirc;t et reste fixe jusqu&rsquo;&agrave; ce que vous
sortiez du paragraphe.
</div>
 
</body>
 
</html>

[leodi]

Bon, j'ai testé le script sous, IE, ca fonctionne, mais quand je le lance sous firefox, la bulle ne suis pas la souris, en fait mon script devait être bon, mais firefox a l'air de buger, bizare : /

Edit : trouvé !!

Au début de ma page j'avais ca :

Code :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

mais en remplacant par ca :

Code :

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

<!DOCTYPE html "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ca fonctionne, faut dire les normes w3c et moi, ca fait 2 ^^ donc me suis peut être trompé dans la syntaxe...

En tout cas merci à toi Auteur pour ton aide