[JavaScript] [SRC][maj] Une info bulle [Résolu]

Auteur · 21/11/2006, 18h13

Un script pour une info-bulle.

Citation:

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.

Auteur · 21/11/2006, 18h30

Citation:

Envoyé par trotters213

Je t'écris au sujet de ton script sur les info-bulles, j'ai décelé des erreurs :
- sous FF 2 : sur n'importe quel paragraphe que tu passes, en entrant par n'importe quel endroit, le carré avec les coordonées de la souris sont en haut à gauche.

- sous IE 6 : ça fonctionne mieux mais la gestion des bords ne se fait pas (donc si tu te colles à un bord, tu ne vois plus le carré des coordonnées) et lorsque tu déplaces la fenêtre, le carré ne se mets plus à côté de la souris mais il se décale toujours plus.

- sous Opera, ... c'est parfait

Plusieurs remarques :

Comme je l'ai dit plus haut j'ai testé ce script avec Firefox1 et IE5. On pourra remarquer également l'absence de doctype dans ce code.

J'ai constaté que ce doctype :

Code :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

avait une influence sur certains attributs : quelle que soit la position du scroll document.body.scrollLeft et document.body.scrollHeight renvoyaient toujours 0 sous Firefox de même que clientX et clientY.

Donc pour Firefox il faut utiliser pageX et pageY d'où cette correction :

Code :

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

1
2
3
4
5
6
 
 Xfen = (ev.pageX)?ev.pageX:ev.clientX;
 Yfen = (ev.pageY)?ev.pageY:ev.clientY;
 
 Xdoc = Xfen + document.body.scrollLeft;
 Ydoc = Yfen + document.body.scrollTop;

clientX, clientY et scrollLeft, scrollTop on les garde pour IE.

Mais comme vous le savez une solution amène un nouveau problème : le code ne fonctionne pas avec Opéra

gestion des bords sous IE6 : cela peut sans doute s'expliquer par le fait que les tailles des bords ne sont pas comptabilisés dans les dimensions du div et seraient donc logiquement "exclus" du gestionnaire d'événements.

L'idéal serait de trouver le doctype qui fait que le code fonctionne quel que soit le navigateur. Si vous avez des suggestions...

Auteur · 07/01/2007, 23h59

Ce script pose vraiment des problèmes aux utilisateurs un exemple ici :
http://www.developpez.net/forums/sho...d.php?t=260358

Le positionnement de la bulle (qui est l'intéret du script) est très difficile à déterminer.

Par conséquent, je me demande si ce script à sa place ici.

Si vous n'avez pas de suggestions pour améliorer ce script, c'est à dire le rendre compatible avec un maximum de navigateurs, je ferai un délestage de ce sujet.

Auteur · 20/01/2007, 11h58

Il existe des scripts d'info-bulle plus efficaces que celui-ci

==> Delestage

07/01/2007, 23h59	#3
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 796 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 796 Points : 5 119 Points : 5 119	Ce script pose vraiment des problèmes aux utilisateurs un exemple ici : http://www.developpez.net/forums/sho...d.php?t=260358 Le positionnement de la bulle (qui est l'intéret du script) est très difficile à déterminer. Par conséquent, je me demande si ce script à sa place ici. Si vous n'avez pas de suggestions pour améliorer ce script, c'est à dire le rendre compatible avec un maximum de navigateurs, je ferai un délestage de ce sujet.
	00

20/01/2007, 11h58	#4
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 796 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 796 Points : 5 119 Points : 5 119	Il existe des scripts d'info-bulle plus efficaces que celui-ci ==> Delestage
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email