infobulle javascript position

**drKzs** · 24/08/2006, 18h38

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

**Auteur** · 25/08/2006, 12h37

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

**drKzs** · 25/08/2006, 14h34

merci, je v essayer de comprendre et de l'inclure

**drKzs** · 25/08/2006, 14h42

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....

**Auteur** · 25/08/2006, 17h15

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

Code :

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

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 :

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

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

**drKzs** · 27/08/2006, 17h22

ok, ça a l'air simple en fait

je vais faire cette modif, merci

**drKzs** · 30/08/2006, 18h31

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

**Auteur** · 30/08/2006, 20h04

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

Code :

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
 
 
<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..)

**drKzs** · 31/08/2006, 11h22

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

**drKzs** · 31/08/2006, 14h10

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 ?

**Auteur** · 31/08/2006, 19h03

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 :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.styleMaBulle
{
text-align: center;
background-color: #A1B2C3;
}
#monDiv{
background-color: #AAAAAA;
}
 
//-->
</style>
 
</head>
 
<body>
<div id="Bulle" class="styleMaBulle">bla bla</div>
<div id="monDiv">bla bla</div>
</body>
 
</html>

infobulle javascript position

JavaScript

Discussions similaires

Partager

Partager