Un script pour une info-bulle.
Une info-bulle

Auteur : auteur
Pas de pièce jointe
Contenu :
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&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 class="mesDiv monStyle2" 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>
 
<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&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>
 
</body>
 
</html>
Remarques :
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.