Les Allergies
Alimentaires
Posez votre question Signaler

JavaScript - Gestion d'une Info-bulle [Résolu]

Fonx2 261Messages postés 6 avril 2008Date d'inscription 22 février 2012Dernière intervention - Dernière réponse le 28 juil. 2010 à 16:11
Bonjour,
Je débute en JavaScript et j'ai besoin de faire apparaître un commentaire extrait d'une base de donnée MySQL dans une info-bulle, lors du survol de la sourie (onMouseOver) sur une case d'un tableau. Bien sur, la bulle doit disparaître lorsque le curseur ne survol plus la case...
J'ai déjà écrit la fonction pour extraire le commentaire de la base et elle fonctionne (on voit bien le commentaire souhaité dans le code source de la page html générée).
Malheureusement, je n'arrive pas à faire apparaître la bulle.
Voici le code:
[PHP]
echo "
<td class='$ColorCase'>
<div
onMouseOver=\"document.getElementById('$j/$m/$y/$IDPersonne').style.visibility='visible'\"
onMouseOut=\"document.getElementById('$j/$m/$y/$IDPersonne').style.visibility='hidden'\">
<p class='InfoBulle' id='$j/$m/$y/$IDPersonne'>$ResultatCommentaire</p>
</div>
</td>";
[CSS]
/*Apparence de l'info-bulle*/
.infobulle {
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 5px;
background-color: #FFFFCC;
}
Résultat du code:
[HTML]
<td class='CaseOrange'>
<div
onMouseOver="document.getElementById('13/07/2010/7').style.visibility='visible'"
onMouseOut="document.getElementById('13/07/2010/7').style.visibility='hidden'">
<p class='InfoBulle' id='13/07/2010/7'>En vacances une semaine...</p>
</div>
</td>
Quelqu'un a t-il une idée du pourquoi sa marche pas?!!???
Lire la suite 

JavaScript - Gestion d'une Info-bulle »

5 réponses
Réponse
+1
moins plus
Pourquoi ne pas utiliser le CSS seul, je connais pour ainsi dire rien en JS.

Lis donc se cours :

http://www.siteduzero.com/tutoriel-3-34410-modifier-l-apparence-d-une-infobulle.html

Il m'a été utile

A la place du SPAN tu utilise un DIV comme ça tu sais améliorer
Ajouter un commentaire
Réponse
+1
moins plus
Ok!

Bon sa fonctionne avec le code suivant:

[HTML]
<td bgcolor='#$Couleur' onmouseover=\"AfficheInfoBulle('toto');\" onmouseout=\"MasqueInfoBulle('toto');\">
<div class='infobulledroite' id='toto'>
<em><span></span>Texte de mon Info-Bulle</em>
</div>
</td>


[JavaScript]
function AfficheInfoBulle(Case) {
document.getElementById(Case).style.display='block';
}
function MasqueInfoBulle(Case) {
document.getElementById(Case).style.display='none';
}


[CSS]
/*Apparence de l'info-bulle*/
.infobulledroite {
display: none;
border: 0;
position: relative;
z-index: 500;
text-decoration:none;
}

.infobulledroite em {
position: absolute;
top: 10px;
left: -5px;
padding: 5px;
color: #000;
border: 1px solid #bbb;
background: #ffc;
width: 200px;
}

.infobulledroite span {
position: absolute;
top: -7px;
left: 15px;
height: 7px;
width: 11px;
background: transparent url(FlecheInfoBulle.gif);
margin:0;
padding: 0;
border: 0;
}


J'espère que sa pourra aider quelqu'un...

Merci encore à tous pour le coup de main!!
Ajouter un commentaire
Réponse
+0
moins plus
Et bien?

Personne ne sait pourquoi sa ne fonctionne pas?!??
Ajouter un commentaire
Réponse
+0
moins plus
Heu... un peu désert ce forum d'entraide non?
Y'a quelqu'un??!
J'ai besoin d'aide!!
Ajouter un commentaire
Réponse
+0
moins plus
Oui, cette astuce fonctionne sous Firefox/chrome/etc... mais pas sous IE!

Je suis donc obligé de revenir sur du JavaScript.

Je vais faire mes essai et vous tenir au courant...
Ajouter un commentaire
Ce document intitulé « JavaScript - Gestion d'une Info-bulle » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?