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>