Probleme info bulle!!!

Signaler
Messages postés
158
Date d'inscription
vendredi 12 mars 2004
Statut
Membre
Dernière intervention
17 avril 2007
-
Messages postés
158
Date d'inscription
vendredi 12 mars 2004
Statut
Membre
Dernière intervention
17 avril 2007
-
Voilà mon probleme : J'ai un tableau où dans les differentes cases et lignes de mon tableau je récupere des données d'une base de données sybase. L'un des champs est une description avec plusieurs lignes donc dans un tableau c'est difficile à lire.
Pour parer à ca, je veux mettre une image et au survol de celle ci, qu'une info bulle s'affiche avec la description dedans.
J'ai trouvé un code que j'ai remanié mais ca ne marche pas, au survol ca m'affiche une nouvelle fenetre avec bien la description mais je n'ai pas d'info bulle!

Voilà mon code :

Script Javascript :



function GetId(id)
 {
  return document.getElementById(id);
 }
 
 var i= false; // La variable i nous dit si la bulle est visible ou non



 function posMouse(e)
 {
   if(i)// Si la bulle est visible, on calcul en temps reel sa position ideale
   { 
     if (navigator.appName!="Microsoft Internet Explorer") // Teste si on est pas sous IE (pour probleme de compatibilité )
     {
       GetId("curseur").style.left=e.pageX + 5+"px";
       GetId("curseur").style.top=e.pageY + 10+"px";
     }
     else
     {
       if(document.documentElement.clientWidth>0)
       {
    GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
    GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
       }
       else
       {
    GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
    GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
       }
     }//fin du else
    
   }//fin du if
 }//fin function



 function showText(text)
 {
   if(i==false)
   {
     GetId("curseur").style.visibility="visible"; // Si le curseur est caché, on l'affiche
     GetId("curseur").innerHTML = text;
     i=true;
   }
 }
 
 function hideText()
 {
   if(i==true)
   {
     GetId("curseur").style.visibility="hidden"; // Si la bulle est visible, on la cache
     i=false;
   }
 }
  document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.

Dans le body : (c'est une page php d'où les echo...)

<?
echo"
";
$desc =($tabTasks[$i]["task_desc"]);
    //echo "<td> </td>";
?>



Et enfin le css :



.infobulle{
 position: absolute; 
 visibility : hidden;
 border: 1px solid Black;
 padding: 10px;
 font-family: Verdana, Arial;
 font-size: 10px;
 background-color: #FFFFCC;
}


Merci beaucoup pour vos réponses s'il y en a....

sabrina

7 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
B
onjour...
Il serait plus intérréssant d'avoir le code généré de ta page PHp pour vérifier comment est représenté le DIV ID='curseur' et de s'assurer qu'il n'englobe pas la TABLE...

;0)
Messages postés
158
Date d'inscription
vendredi 12 mars 2004
Statut
Membre
Dernière intervention
17 avril 2007

bonjour,

J'ai vérifié et le div n'englobe pas le table, il est vraiment en haut, dans le body.
mais je comprend pas pourquoi ca me l'affiche bizarrement, pas en tool tip?!?
Merci...
Sabrina
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour




A mon avis :
au lieu de :  document.onmousemove= move;
mettre document.onmousemove=posMouse

de plus ta balise
semble ne pas etre fermée.

Remarques :
1/ au lieu de if (i ==false), tu peux mettre if (!i)
(et également : if (i) au lieu de if (i==true)   )
2/ ta function :
function GetId(id)
 {
  return document.getElementById(id);
 }
Il est devenu courant de l'appeler $ (mais ce n'est pas obligatoire, évidemment)
(cf scriptaculous, en particulier, pour une version plus complête)

Cordialement
Roro webDev
Messages postés
158
Date d'inscription
vendredi 12 mars 2004
Statut
Membre
Dernière intervention
17 avril 2007

j'ai fait les changements que tu m'a dit, mais ca ne marche pas, ca ne m'affiche rien maintenant... J'ai l'image mais rien ne se passe quand je passe la souris dessus.
Ce code s'effectue sur une case d'un tableau dans une class php (objet) cela ne pose pas de probleme?
Je ne comprend vraiment pas le probleme car si je met ce code dans une page simple ca marche...
:
sabrina
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour




click-droit --> afficher la source. (pour avoir le code généré, comme demandé par petoleteam), puis copier-coller ici, ça nous aidera à ...t'aider

Cordialement
Roro webDev
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
Bonjour,

    +1

: avoir le code généré, comme demandé par petoleteam et roro06
    mais pas 68951 lignes non plus si c'est possible !






<hr />                                Cordialement                Bul             [mon Site]     [M'écrire]<hr />
Messages postés
158
Date d'inscription
vendredi 12 mars 2004
Statut
Membre
Dernière intervention
17 avril 2007

Bonjour,
Merci de votre aide mais en fait j'ai trouvé un code en css beaucoup plus simple, moins lourd et surtout qui marche nickel et me permet de faire des info bulle personnalisées.
Merci!

sabrina