J'ai un problème avec l'infobulle, elle s'affiche sur tout les liens de ma page, alors que j'en ai besoin seulement sur quelques liens. Dans le tutoriel il est dit de crée une class a ces liens mais je ne vois pas quel type de class faire..
Apars ça, le tutoriel est tout de même très bon et j'en profite pour remercier Grafikart au passage.
En fait dans ton HTML, tu fais des liens du style :
<a href="#" class="lien_avec_infobulle">Ton lien </a>Et en JS tu cible les liens avec cette classe :
$("a.lien_avec_infobulle")Cela n'aura effet que sur les liens que tu délimite par cette classe.
Merci beaucoup !
Mais même en rajoutant ce code au js et cette classe au lien, tous les liens se retrouve cibler... Ceux sans title ont juste une petite bulle vide sans texte qui apparaît.
Désolé je suis débutant encore..
Pas de soucis ;) peux-tu mettre ton script JS et HTML afin que je puisse mieux t'aider?
Le script jquery est le suivant, auquel j'ai essayer d'apporter les modifications que tu m'avais conseillé mais n'y conaissant quasiment rien en jquery..
$(function(){
$("a .lien-info")
$("a").mouseover(function(){
$("body").append('<span class="infobulle"></span>');
var bulle = $(".infobulle:last");
bulle.append($(this).attr("title"));
$(this).attr("title","");
var posTop = $(this).offset().top-$(this).height();
var posLeft = $(this).offset().left+$(this).width()/2-bulle.width()/2;
bulle.css({
left:posLeft,
top:posTop-20,
opacity:0
});
bulle.animate({
top:posTop-10,
opacity:0.99
});
});
$("a").mouseout(function(){
var bulle = $(".infobulle:last");
$(this).attr("title",bulle.text());
bulle.animate(
{
top:bulle.offset().top+10,
opacity:0
},
500,
"linear",
function(){
bulle.remove();
}
);
});
});Je voudrais pouvoir y mettre sur ce type de lien HTML :
<td>
<span class="jour_nb">1</span>
<div class="eventslist">
<p class="font-month"><a href="#" class="lien-info" title="Nat FFC - Classic Vienne Poitou Charentes - Finale Coupe de France">Finale Coupe de France</a></p>
</div>
</td>(cellule de tableau)
Merci d'avance pour ton aide ! :)
Alors dans ton JS, au lieu de :
$("a").mouseover(function(){il faut mettre :
$("a.lien-info").mouseover(function(){et tu peux enlever ça (à ta ligne 2) :
$("a .lien-info")et au lieu de :
$("a").mouseout(function(){il faut mettre :
$("a.lien-info").mouseout(function(){Ah oui je comprend mieux maintenant !
Un grand merci a toi, tout fonctionne parfaitement ! :D
De rien ;)