JavaScript - Gestion d'une Info-bulle

[Résolu/Fermé]
Signaler
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
-
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
-
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?!!???

6 réponses

Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
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!!
8
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41713 internautes nous ont dit merci ce mois-ci

Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
Heu... un peu désert ce forum d'entraide non?
Y'a quelqu'un??!
J'ai besoin d'aide!!
Messages postés
141
Date d'inscription
dimanche 20 décembre 2009
Statut
Membre
Dernière intervention
17 février 2015
27
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
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
Et bien?

Personne ne sait pourquoi sa ne fonctionne pas?!??
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
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...
Messages postés
18
Date d'inscription
samedi 2 mars 2013
Statut
Membre
Dernière intervention
14 novembre 2018
2
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 !
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
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 ;)