Discussion :

[xenos]

Bonjour,

J'ai un code en JavaScript qui fonctionne très bien, avec n'importe quel navigateur, qui fait bouger l'infobulle avec la souris, ...

La seule chose c'est que je n'arrive pas à ce qu'il mette les informations à la ligne ...

Voici le code du fichier (infobulle.js) en JavaScript :

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
var xOffset=6
var yOffset=5    
 
var affiche = false; // La variable i nous dit si le bloc est visible ou non
var w3c=document.getElementById && !document.all;
var ie=document.all;
 
if (ie||w3c) {
  var laBulle
}
 
function ietruebody(){  // retourne le bon corps...
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function deplacer(e) {
  if(affiche){
    var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
    var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
 
    var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
    var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
 
    var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
    var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
 
    var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
 
    // modifier la largeur de l'objet s'il est trop grand...
    if(laBulle.offsetWidth > winwidth / 3){
      laBulle.style.width = winwidth / 3
    }
 
    // si la largeur horizontale n'est pas assez grande pour l'info bulle
    if(rightedge < laBulle.offsetWidth){
      // bouge la position horizontale de sa largeur à gauche
      laBulle.style.left = curX - laBulle.offsetWidth + "px"
    } else {
      if(curX < leftedge){
        laBulle.style.left = "5px"
      } else{
        // la position horizontale de la souris
        laBulle.style.left = curX + xOffset + "px"
      }
    }
 
    // même chose avec la verticale
    if(bottomedge < laBulle.offsetHeight){
      laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
    } else {
      laBulle.style.top = curY + yOffset + "px"
    }
  }
}
function montre(text) {
  if (w3c||ie){
    laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : ""
    laBulle.innerHTML = text; // fixe le texte dans l'infobulle
    laBulle.style.visibility = "visible"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
    affiche = true;
  }
}
function cache() {
  if (w3c||ie){
    affiche = false
    laBulle.style.visibility="hidden" // avoid the IE6 cache optimisation with hidden blocks
    laBulle.style.top = '-1000px'
    laBulle.style.backgroundColor = ''
    laBulle.style.width = ''
  }
}
 
document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.

La façon dont je l'appel :

Code :

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

1
2
3
4
5
<script type="text/javascript" src="infobulle.js"></script>
 
[...]
 
<img onmouseover="montre('Une simple info-bulle');" onmouseout="cache();" src="images/aide.gif" alt="" title='' />

J'ai essayé de rajouter \n - <br \> - ... dans le texte mais rien n'y fait ... je n'arrive pas à le faire aller à la ligne ...

D'avance merci pour vos réponses.

[Chen norris]

C'est quoi, le "\n - <br \> -" ? Pourquoi pas un simple <br> ? (ou "\n <br>", éventuellement)

[xenos]

C'est quoi, le "\n - <br \> -" ?

Le "\n - <br \> -" n'existe pas ... \n ainsi que <br \> sont différents symboles pour mettre à la ligne.

En ne mettant que <br>, comme tu le suggère, ça ne fonctionne pas ...

[Kerod]

Déjà pour le br en XHTML c'est <br/> et non <br\> ca existe pas.

Ensuite ta bulle est faite comment ?
C'est un div ? As tu essayé de jouer sur les propriétés de style ? Et c'est bizarre que le br ne passe pas si c'est un div.

SI c'est la bulle initiale du navigateur alors là c'est normal

[xenos]

Ensuite ta bulle est faite comment ?
C'est un div ?

Oui, je l'appel dans un <div>.

As tu essayé de jouer sur les propriétés de style ?

Oui, j'ai même rajouté les propriétés propres à l'infobulle dans mon fichier .css. Mais je ne vois pas en quoi cela pourrait intervenir ici ? Il me semblait qu'à partir du fichier .css on ne pouvait paramétrer que la couleur, le type de bord, la police, ...

Et c'est bizarre que le br ne passe pas si c'est un div.

SI c'est la bulle initiale du navigateur alors là c'est normal

Qu'entends tu pas "bulle initiale du navigateur" ?

[Kerod]

C'est bizarre je viens de tester avec ce code et ca fonctionne.

Code :

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

1
2
<a onmouseover="document.getElementById('labulle').innerHTML = 't<br/>t'">test</a>
<div id="labulle">test</div>

J'ai pas testé avec le tien car il manque plein d'information que tu n'as pas mis comme par exemple la création de la balise div et etc...


ps : la bulle initiale c'est le title qui est mis par défaut

[xenos]

Si ce code est incomplet, que me conseille tu de prendre comme code pour une info bulle ?

[Auteur]

bonjour,

que penses-tu de ce code ? Je ne l'ai pas testé avec tous les navigateurs.

http://www.developpez.net/forums/sho...9&postcount=71

[xenos]

Il a l'air pas mal, je vais regarder.

merci

[Chen norris]

Normalement, avec un div, on peut spécifier une largeur fixe via le CSS. Mais je ne suis pas sûr que le texte revienne automatiquement. Une autre solution est de faire un <table> à une seule case qui occupe tout ton <div> et qui contienne tout ton texte à afficher, avec un align="justify", par exemple...