Discussion :

[patricklinden]

Bonjour !
Voila j'aimerai faire apparaittre une infobulle lorsque la souris mouseover() une image.

J'avais bien essayé avec un <span> :

Code :

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

1
2
 
<a class="eHelpTip" href="#" onmouseover="mafonction(blabla);"><img src="http://localhost:52800/icon1.jpg" alt=""/><span id="myspan"></span></a>

mafonction() fait basiquement un monspan.innerhtml = moncodeHTMLaveclesliens
avec comme 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
 
div.ehelptip {
    width: 300px;
    height: auto;
 
    top: 10px;
    left: 10px;
 
    background-color: #00ffff;
 
    padding: 3px;
    border: 1px solid #000000;
}
 
a.eHelpTip {
  position:relative;
}
a.eHelpTip:hover {
   background: none; 
   z-index: 500; 
}
a.eHelpTip span {display: none;}
 
a.eHelpTip:hover span {
   display: inline; 
   position: absolute;
   white-space: nowrap;
   width:auto;
   height:auto;
}

Le seul probleme c'est que le contenu de mon span est en HTML et qu'il contient des liens. Et qu'ils ne sont pas cliquables (quand je clique ca selectionne tout le div et ca ne clique pas sur le lien)

Des idées ?
Merci d'avance

[Crayon]

Salut, j'utilise Mootools pour faire des infobulles. Pour plus de renseignement va voir le démo: http://demos.mootools.net/Tips

[patricklinden]

Nan mais justement, le probleme de ca c'est que le tips se deplace en meme temps que la souris et on peut pas naviguer a l'interieur, en cliquant sur un lien par exemple

[Crayon]

L'exemple 3 se nomme Fixed tooltip. Ce n'est pas ce que tu cherches as faire?

[gloglo]

ceci marche très bien , essayes le :

Code :

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

1
2
3
4
5
 
<a class=infoBulle onclick='return false' href="#">
 <img src="help.gif" alt="help">
 <span>Ceci est un help</span>
</a>

et 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
.infoBulle ,.infoLien{
  position:relative;
}
.infoBulle ,.info:hover{
  text-decoration:none
}
 
.infoBulle :hover{
  cursor:default;
}
 
html * .infoBulle :hover{
  z-index:1
} 
 
 
/* paramètres de l'infobulle */
.infoBulle span,.infoLien span{
  position:absolute;
  padding:3px;
  text-align:center;
 font-weight:bold;
  color:#fffdds;
  background:#FFAA44;
  z-index:99;
  top:12px;
  left:-9999px;
  width:150px;
}
 
.infoBulle :hover span,.infoLien:hover span{
  left:15px;
}

[patricklinden]

Ben le probleme de ca c'est que je ne peux PAS mettre de lien dans ma bulle d'aide.
Je me fais envoyer peter parce que je ne peux pas mettre de balise <a a l'interieur d'une balise <a

[gloglo]

dans ce cas au lieu de faire href="#" tu met ton lien dedans.

[patricklinden]

ouais mais toujours pas parcequ'il y a plusieurs liens...