infobulle javascript position

Version imprimable

24/08/2006, 18h38
drKzs

infobulle javascript position

Bonjour,

J'ai un petit problème avec une infobulle...
J'ai trouvé ce code source sur le net:
http://mobman02.free.fr/nepassupprimer/info_bulle.html

Je ne connais pas le javascript, j'ai juste modifié la fonction montre() pour qu'elle colle à mes besoins en y insérant qq lignes jsp.

Le problème, c'est lorsqu'on est en base de la page, l'infobulle s'affiche en bas...
Comment faire pour qu'elle s'affiche vers le haut si elle est en bas de la page, etc... ?

Merci :)
25/08/2006, 12h37
Auteur

bonjour,

ce code gère les cas que tu décrits (je ne l'ai pas testé avec tous les navigateurs) :

http://www.developpez.net/forums/sho...9&postcount=71
25/08/2006, 14h34
drKzs

merci, je v essayer de comprendre et de l'inclure :)
25/08/2006, 14h42
drKzs

pas facile de l'inclure, vu mon niveau de javascript... Le problème est que la fonction javascript de lien que j'ai donné prend une string en parametre, ce qui permet d'afficher n'importequoi dans la bulle :) c'est surement adaptable à ton code, sauf qu'une fois la string récupérée dans la fonction je sais pas koi en faire....

ajoute un paramètre à la fonction MouseOver(). Puis affecte à innerHTML le contenu de ce paramètre :
Code:

1 2 3 4 5 6 7 8 function MouseOver(ev, message) { /*............*/ /*Contenu de la bulle*/ el.innerHTML = message; }
et lors de l'appel de la fonction :
Code:

1 2 <div onmouseover="MouseOver(event, 'Voici mon message....')"></div>

27/08/2006, 17h22
drKzs

ok, ça a l'air simple en fait :) je vais faire cette modif, merci :)
30/08/2006, 18h31
drKzs

hum, bon j'ai enfin pu tester mes bubulles, voilà le problème qui semble se poser:

dans le script que j'ai récupéré (cf haut page), j'ai deux fonctions js (montrer et cache, comme toi).
Ensuite je place une div sur ma page (comme toi aussi), et il ne me reste plus qu'à appeller les deux fonctions dans une balise a.

Comme le fait que ce soit une balise a est très important pour moi, j'ai essayé d'adapter ton code, bêtement bien sur ;) et donc ça marche pas. J'imagine que ça doit ê une histoire de référence mais je n'arrive pas à comprendre comment le premier script fonctionne... On met une div sur la page, les deux fonctions, et hop ça marche :(

tu n'as pas oublié la feuille de style de la bulle ?
Voilà une exemple avec <a>

Code:

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
 
 
<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;
text-align: center;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function MouseOver(ev, msg)
{
  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 = msg;
 
}
 
function MouseOut()
{
 //on cache la bulle
 document.getElementById("Bulle").style.display = "none";
}
//-->
</script>
</head>
 
<body>
<div id="Bulle">Mon info-bulle</div>
<a onmouseover="MouseOver(event, 'Mon joli message !')" onmouseout="MouseOut()">Mon lien 1</a>
 
<br><br><br>
<a onmouseover="MouseOver(event, 'Mon très très joli message !')" onmouseout="MouseOut()">Mon lien 2</a>
 
</body>
 
</html>

quelles parties du code ne comprends-tu pas ?
Regarde si
-Le div Bulle a un id="Bulle". (B majuscule)
-tu transmet l'événement (event) dans la fonction MouseOver()
-la feuille de style de la bulle.

Tu peux remplacer a par n'importe quelle balise (p, div, a, span..)

31/08/2006, 11h22
drKzs

c'est étrange, je suis presque sur d'avoir essayé ça justement :? Mettre les fonctions dans une balise a, et j'ai bien laissé la div avec bulle... Mais ça n'a pas fait gd chose, je me suis peut ê planté, je v réessayé.. Mais effectivement, il y a la feuille de style :)
31/08/2006, 14h10
drKzs

Oui, effectivement ça marche, au llieu de onmouseover j'avais laisser onmousemove, et ça donnait rien ...
Merci pour toutes ces réponses, je peux faire ce que je souhaitais maintenant :)

Par contre je me pose une question, pour comprendre.
Dans le premier script, l'auteur utilise une balise div, en y référençant l'id et le style css (classe)

Toi, dans ta div, tu mets que l'id, et tu définis le style pour l'id. J'ai essayé de modifier cela, en créant une classe. J'ai changé ta div, j'y ai précisé la class css, mais ça n'a pas fonctionné, je me demande pourquoi ?

Citation:

Envoyé par drKzs

Toi, dans ta div, tu mets que l'id, et tu définis le style pour l'id. J'ai essayé de modifier cela, en créant une classe. J'ai changé ta div, j'y ai précisé la class css, mais ça n'a pas fonctionné, je me demande pourquoi ?

tu as sans doute fait une faute de frappe : majuscule/minuscule, ponctuation (un dièse au lieu d'un point, point-virugle manquant) etc....
As-tu un bout de code ?
Code:

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 <html> <head> <title></title> <style type="text/css">  </style> </head> <body> <div id="Bulle" class="styleMaBulle">bla bla</div> <div id="monDiv">bla bla</div> </body> </html>