Bonjour tout le monde , voila j'aimerai avoir une aide suite a un tuto que j'ai suivi sur internet.

$(function(){
    
    $("a").mouseover(function() {
        if($(this).attr("title")=="") return false;
        
        $("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)-7;
		
		

        bulle.css({
            left:posLeft,
            top:posTop-30,
            opacity: 0
        });
        bulle.animate({
            top:posTop-20,
            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();
            }
        );
    
    });
    
});

Donc j'ai obtenu ceci ...

Mais j'aimerai utiliser une fonction qui me permetrai d'avoir un temps d'attente de deux secondes(maintenu) avant que l'affichage de l'infobulle se fasse ..

Dons en plus clair au cas ou je suis trop flou.

Quand on passe sur un lien et que la souris reste sur ce lien pendant deux sec mon infobulle apparait si non, elle n'apparait pas ...

Je suis pas un expert du tout en javascript et langage web .. mais j'aimerai inclure ces infobulle sur mon site que je suis suis occupé de coder en html/ccs basique


Je me suis un peu renseigné et apparament je pense que je dosi utiliser la fonction Timeout

Mais je ne sais pas exactement comment l'utiliser et si je dois mettre en place un traitement avec un if pour le temps d'attente si quelqu'un peu m'aider ca serait gentil


Merci

$(function(){
    var wait = false, 
        motherfucker = 2000;

    $("a").mouseover(function() {
        wait = setTimeout(function () {
            if($(this).attr("title")=="") return false;
        
            $("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)-7;
		
            bulle.css({
                left:posLeft,
                top:posTop-30,
                opacity: 0
            });
            bulle.animate({
                top:posTop-20,
                opacity: 0.99
            });
        }, motherfucker);
    });
    
    $("a").mouseout(function() {
        clearTimeout(wait);
        var bulle = $(".infobulle:last");
        $(this).attr("title",bulle.text());
        bulle.animate(
            {
                top:bulle.offset().top-10,
                opacity: 0
            },
            500,
            "linear",
            function(){
                bulle.remove();
            }
        );
    
    });
    
});

100% non testé mais l'idée est là.

j'ai essayé mais ca ne marche pas, j'ai supprime le motherfucker = 2000;
pour mettre directement la valeur ; mais sans succes et j'ai regardé la structure que tu as mis et essayé de changer mais je ne vois pas l'erreur :s

Salut,

Le principe c'est que tu mets un Timeout pour créer l'infobulle lors du mouseover et que tu le clear lors du mouseout (et que tu détruit l'infobulle).

oui je comprend cela

J'ai essayé ainsi mais cela ne marche pas : setTimeout ("Fonction / Expression", Delai );

$(function(){
   
    $("a").mouseover(function() {
        setTimeout(function () {
            if($(this).attr("title")=="") return false;
        
            $("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)-7;
		
            bulle.css({
                left:posLeft,
                top:posTop-30,
                opacity: 0
            });
            bulle.animate({
                top:posTop-20,
                opacity: 0.99
            });
        }, 2000);
    });
    
    $("a").mouseout(function() {
        clearTimeout();
        var bulle = $(".infobulle:last");
        $(this).attr("title",bulle.text());
        bulle.animate(
            {
                top:bulle.offset().top-10,
                opacity: 0
            },
            500,
            "linear",
            function(){
                bulle.remove();
            }
        );
    
    });
    
});

Pourtant en regardant bien la syntaxe cela devrait etre bon :s

Personnellement il y a juste un petit truc qui me choque:

bulle.css({
                left:posLeft,
                top:posTop-30,
                opacity: 0
            });
            bulle.animate({
                top:posTop-20,
                opacity: 0.99
            });

En fait animate fait la même chose que css avec un délais supplémentaire... Mais pourquoi faire ça ?!

Sinon pour ce qui est de la fonction setTimeout(), tout est fait rien n'est dit, est-ce ce qui te pose problème ?

var time = setTimeout( // Tu n'est en aucun cas obligé de l'inclure dans une variable 
function() {
    // Une fonction annonyme...
},
2000 // Des micro secondes. Ça correspond donc a 2secondes !
);

Bon courage.

nod_ : tssss franchement... t'aurais pu éviter le motherfucker


sinon x4re, faudrait être un peu plus explicite aussi. Te contenter de donner ton script et dire "ça marche pas", ce n'est pas suffisant. Si au moins tu nous donnait un message d'erreur, ou le comportement de ton script, ça nous aiderait grandement.

okok

nek : bulle.css , met en place la position et l'opacité de passe de l'info bulle et animate la modifie .

donc bulle.css "tent" vers bulle.animate

comme pour flash pour faire une interpolation de mouvement il dois avoir le depart et l'arrivé

Ou je me trompe complètement mais cela marche jusque la le code.


shivan : pas de soucis en faite quand je dis ca marche pas c'est que le script entier ne marche plus mes infobulles n'apparaissent plus.

J'ai ete voir sur des sites pour voir la syntaxe mais c'est bien la bonne syntaxe que j'ai utilisé et que _nod a montré .. je ne vois pas ou peut etre le probleme :s

Ouais nan mais en fait je voulais être sûr que ça ne soit pas une erreur (pas très "classique" comme utilisation ).

Sinon à la place de mouseover tu peux essayer avec mouseenter (normalement avec jquery c'est bien mouseenter qu'il faut utiliser, bien que les deux fonctionnent).

Shivaan tu n'abuses pas un peu de ton pouvoir pour le motherfucker ? Je sens le côté obscure de la force arriver !

Bah tu sais Nek, c'est pas parce que je suis modo que j'ai cessé d'être membre. J'ai donc le droit de m'exprimer pour moi-même. Pis bon, regarde mon nouveau slogan aussi

j'ai mis mouseenter a la place Nek et le script marche mais sans la fonction setTimeout()

En faite le script marche mais je n'arrive pas a mettre le setTimeout() pour l'attente je comprends pas je suis toujours occupé de rechercher

t'as une page en ligne ? j'ai la flemme de copier ça en local

<hs>Fermeture mystique dans les premières semaines tu commence fort shivaan :D</hs>

Je suis de l'avis de nod_ pour la page en ligne .

Et stop de martyriser le Shivaan. Moi je l'aime mon Shivaan !!

C'est a dire une page en ligne , vous voulez que j'up le résultat sur un ftp ?

Si c'est ca je mets quoi sur la page mon script avec l'essai d'ajout de code ?

Bah, une infobulle.

http://www.silence.prod.bz/folio/

S'il vous plait

$(function(){
    var wait = false, 
        motherfucker = 2000;

    $("a").mouseover(function() {
        if($(this).attr("title")=="") return false;
        var that = $(this);

        var bulle = $('<span class="infobulle"></span>');
        $("body").append(bulle);
        bulle.text(that.attr("title"));
        that.attr("title","");

        wait = setTimeout(function () {
        
            var posTop = that.offset().top-that.height();
            var posLeft = that.offset().left+(that.width()/2-bulle.width()/2)-7;
    
            bulle.css({
                left:posLeft,
                top:posTop-30,
                opacity: 0
            });
            bulle.animate({
                top:posTop-20,
                opacity: 0.99
            });
        }, motherfucker);
    });
    
    $("a").mouseout(function() {
        clearTimeout(wait);
        var bulle = $(".infobulle:last");
        $(this).attr("title",bulle.text());
        bulle.animate(
            {
                top:bulle.offset().top-10,
                opacity: 0
            },
            500,
            "linear",
            function(){
                bulle.remove();
            }
        );
    
    });
    
});

C'est a cause du $(this) qui chiait tout dans le settimeout. j'ai améliorer un poil le truc, faudrait quand même revoir le système c'est pas très très solide là, le coup du $(".infobulle:last") c'est grave moyen.

Merci nod_ bein pour le last je ne vois pas comment je pourrai recuperer la config ? :s