J'ai du texte et certains mots surlignés. Je voudrais qu'une image (principalement gif) apparaisse comme une "info-bulle" lorsque je survole le texte respectif. Pour chaque mot que je souligne, j'aimerais utiliser un gif différent.
Si j'utilise CSS avec a:hover et background-image, toute la mise en page est foutue. J'ai aussi essayé jQuery & qTip, mais je n'ai pas trouvé de solution pour les images.
La solution la plus parfaite serait si je pouvais:
<a href="#" title="" src="1y2m_small.png">1st year, 2nd month</a>
Où src est l'image que je voudrais voir apparaître dans l'info-bulle.
Réponses:
1 pour la réponse № 1Essayez un peu de jQuery:
$("a").hover(
function(){
$(this).append("<img src="/images/" + $(this).attr("src") + "" />");
},
function(){
$(this).children("img").remove();
}
);
CSS requis:
a{
position: relative;
}
img{
position: absolute;
top: 20px;
left: 0; //position how you want
}
Ici est un jsfiddle de travail
Sources)
0 pour la réponse № 2
Vous avez votre réponse ici, mon fils. Vérifiez moi et +1 moi s'il vous plaît
http://jsfiddle.net/alaingoldman/ybQCd/4/
simple
CSS
#cacher{ affichage: aucun; position: absolue; }
HTML
<span id="target" > Hover over me </span> <img id="hide" src="/images/http://oi45.tinypic.com/33tjd3d.jpg">
jQuery
$ (document) .bind ("mousemove", fonction (e) { $ ("# hide"). css ({ à gauche: e.pageX + 20, en haut: e.pageY }); $ ("# cible"). survolez ( une fonction () { $ ("# hide"). show (); }, une fonction () { $ ("# hide"). hide (); });});