JavaScript - Gestion d'une Info-bulle
Résolu
Fonx2
Messages postés
331
Date d'inscription
Statut
Membre
Dernière intervention
-
Fonx2 Messages postés 331 Date d'inscription Statut Membre Dernière intervention -
Fonx2 Messages postés 331 Date d'inscription Statut Membre Dernière intervention -
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?!!???
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?!!???
A voir également:
- Infobulle html w3schools
- Crystal disk info - Télécharger - Informations & Diagnostic
- Info pc - Guide
- Logiciel gestion locative gratuit excel - Télécharger - Comptabilité & Facturation
- Wifi info view - Télécharger - Divers Réseau & Wi-Fi
- Logiciel gestion photo gratuit - Guide
6 réponses
Ok!
Bon sa fonctionne avec le code suivant:
[HTML]
[JavaScript]
[CSS]
J'espère que sa pourra aider quelqu'un...
Merci encore à tous pour le coup de main!!
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!!
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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...
Je suis donc obligé de revenir sur du JavaScript.
Je vais faire mes essai et vous tenir au courant...
Salut, est-il possible de faire un peux la même chose mais au survol d'une position, par exemple, j'ai une image, et sur cette même et unique image, faire plusieurs survol a des endroits différents. Si oui, répondez moi SVP. Bye !
Bonjour,
Oui c'est tout à fait possible.
Tu as au moins deux solutions pour sa: image mapping (pur html) ou alors en définissant ton image comme background sur une div de taille fixe puis en plaçant d'autre div par dessus en utilisant z-index pour gérer la superposition et avec des ancres (balise <a>) autour de ces fameuses div (mélange html et css).
Sur le site du W3C, la méthode avec html: https://www.w3schools.com/TAGS/tag_map.asp
Un tuto (en anglais) pour la seconde méthode ici: http://www.neopets.com/~Kacizilla
Voila.
Bon courage ;)
Oui c'est tout à fait possible.
Tu as au moins deux solutions pour sa: image mapping (pur html) ou alors en définissant ton image comme background sur une div de taille fixe puis en plaçant d'autre div par dessus en utilisant z-index pour gérer la superposition et avec des ancres (balise <a>) autour de ces fameuses div (mélange html et css).
Sur le site du W3C, la méthode avec html: https://www.w3schools.com/TAGS/tag_map.asp
Un tuto (en anglais) pour la seconde méthode ici: http://www.neopets.com/~Kacizilla
Voila.
Bon courage ;)
