Comment faire une infobulle en javascript

Version imprimable

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

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

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:

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

31/10/2007, 19h30
Crayon

Salut, j'utilise Mootools pour faire des infobulles. Pour plus de renseignement va voir le démo: http://demos.mootools.net/Tips
01/11/2007, 02h46
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
01/11/2007, 04h23
Crayon

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

ceci marche très bien , essayes le :

Code:

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:

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;
}

01/11/2007, 10h29
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
01/11/2007, 10h42
gloglo

dans ce cas au lieu de faire href="#" tu met ton lien dedans.
05/11/2007, 09h09
patricklinden

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