Un script pour une info-bulle.
Une info-bulle
Auteur : auteur
Pas de pièce jointe
Contenu :
Remarques :
Code html : 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136 <html> <head> <title></title> <style type="text/css"> <!-- .clBulle{ 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; } .mesDiv{ background-color: #B3C2A1; padding: 10px; } .monStyle1{ width: 150%; height: 60px; } .monStyle2{ width: 220px; } //--> </style> <script type="text/javascript"> <!-- function MouseOver(ev) { var Xdoc, Xfen, Ydoc, Yfen, htDiv, lgDiv, dX, dY; var Ybulle; 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) { Ybulle = document.body.clientHeight + document.body.scrollTop - htDiv-5; if (parseInt(Ybulle)>parseInt(Ydoc)) { el.style.top = Ybulle; } else { el.style.top = Ydoc - htDiv-dY; } } else { el.style.top = Ydoc + dY-5; } //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 class="clBulle" id="Bulle">Mon info-bulle</div> <div class="mesDiv monStyle1" onmousemove="MouseOver(event)" onmouseout="MouseOut()"> ici l’info bulle se déplace avec la souris lorsque vous survolez ce paragraphe... <br> Déplacer l’ascenseur horizontal et repositionnez la souris sur le paragraphe. Lisez Xdoc et Xfen.... ;-) </div> <br><br><br> <div class="mesDiv monStyle2" onmouseover="MouseOver(event)" onmouseout="MouseOut()"> par contre ici, l’info-bulle apparaît et reste fixe jusqu’à ce que vous sortiez du paragraphe. </div> <br><br><br><br><br><br><br><br> <!-- <br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> --> <div class="mesDiv monStyle1" onmousemove="MouseOver(event)" onmouseout="MouseOut()"> ici l’info bulle se déplace avec la souris lorsque vous survolez ce paragraphe... <br> Déplacer l’ascenseur horizontal et repositionnez la souris sur le paragraphe. Lisez Xdoc et Xfen.... ;-) </div> </body> </html>
ce code fonctionne très bien avec Firefox et IE5.
Deux possibilités : la bulle suit la souris, ou la bulle reste fixe (cf. exemples).
Il gère les cas où la souris se trouve à droite de la page, ainsi que le cas où la souris se trouve en bas à droite de la page.
Partager