Discussion :

[amarcil]

salut a tous,

Toujours dans le registre des info bulles, j'ai encore une problématique :

J'ai un truc parfait sous FF (voir image en pj)

Et sous IE la bulle verte ne s'affiche pas ! ...

Moi je cale purement et simplement sur ce soucis...

Merci d'avance pour votre aide...

[bigboomshakala]

salut

et on doit afficher la source de la page, récupérer les url des fichiers javascript et les télécharger pour voir ce qui ne va pas ???

[amarcil]

oups j'avais oublié...

voici le code l'infobulle :

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
// on formate la bulle.
document.write('<div id="bulle" class="infos_bulle"><div class="infos_bulle_haut"></div><div id="bulle_bas" class="infos_bulle_bas"></div></div>');
// on met à jour la position de la bulle.
document.onmousemove = move_bulle;
 
var i=false; // La variable i nous dit si la bulle est visible ou non
 
function ElementId(id)
{
  return document.getElementById(id);
}
 
function move_bulle(e) // Fonction de suivi de la souris
{
  if(i){
    if(navigator.appName!="Microsoft Internet Explorer"){
      ElementId("bulle").style.left = (-15)+e.pageX+"px";
      ElementId("bulle").style.top = 15+e.pageY+"px";
    }else{
      ElementId("bulle").style.left = (-15)+event.x+document.documentElement.scrollLeft+"px";
      ElementId("bulle").style.top = 15+event.y+document.documentElement.scrollTop+"px";
    }
  }
}
 
function open_bulle(content)
{
  if(i==false){
    ElementId("bulle").style.visibility = "visible"; // Si la bulle est cacher on la rend visible.
    ElementId("bulle_bas").innerHTML = content; // on copie le contenu dans la bulle
    i=true;
	move_bulle(ElementId("bulle")); // positionnement initial (correctif X.Dusart)
  }
}
 
function close_bulle()
{
  if(i==true){
    ElementId("bulle").style.visibility = "hidden"; // Si la bulle est visible on la cache
    i=false;
  }
}

Ensuite dans ma page d'affichage j'ai ceci :

Code :

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

 <td><span onmouseover="open_bulle(<?php echo $infobulle;?>);" onmouseout="close_bulle();" class="link_bulle"><?php echo $this->cout['name'][$c];?></span></td>

avec $infobulle qui est initialisé en php avec un tableau pour afficher les éléments de manière propre et alignée dans cette bulle...

et mon CSS:

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
.link_bulle {
cursor: default;
color: gray;
border-bottom: 1px dotted gray;
}
 
.infos_bulle {
z-index: 500;
position: absolute;
top: -999px;
width: 500px;
visibility: hidden;
opacity: 0.9;
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
filter: alpha(opacity=90);
}
 
.infos_bulle_haut {
height: 30px;
background: url(bulle3.png) no-repeat left top;
}
 
.infos_bulle_bas {
font: normal 10px Verdana, Arial;
color: black;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 12px;
background: url(bulle3.png) no-repeat left bottom;
}

voila merci d'avance pour vos lumières...

[Matthieu2000]

ajoute un attribut style à ton calque "bulle"

[le_chomeur]

ou refait ton infobulle en dom ...
un document.write => obselète ...

[Matthieu2000]

ajoute des " ou ' autour des chaines de caractères et pas de retour chariot !

Code :

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

open_bulle(     <table>       <tr>         <td>Image</td>         <td>Ce ...);

->

Code :

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

open_bulle('<table><tr>         <td>Image</td>         <td>Ce ...');

voir le forum php pour les addslash