evdog69 Il y a 7 mois Répondre
salut, c'est quoi le logiciel que tu utilise ? je ne le reconnais pas je suis curieux
56 commentaires
Ajouter un commentaire
naou Il y a 9 mois Répondre
parfait
aziz Il y a 9 mois Répondre
Un grand merci, facile et clair
david.maarek Il y a 9 mois Répondre
La demonstration ne fonctionne c'est normal ?
sabak'noGAARA Il y a 10 mois Répondre
Excellent tuto
freestyler17 Il y a 1 an Répondre
nice tuto merci encore
loooq Il y a 1 an Répondre
Bonjour à tous. Effectivement excellentes ces infobulles. Mais j'ai un soucis (d'autres plus haut l'on signalé). Quand je teste les liens, tout marche mais au bout d'un court instant, des infobulles apparaissent également au survol d'un lien sans "title" (avec le label d'un lien qui a le title). C'est fort dommage ! Quelqu'un a la solution ?
hades38 Il y a 12 mois - Répondre
Rajoute une class a ton lien et tu ne devrais plus avoir ce problème
DKY Il y a 1 an Répondre
Bonjour,
Le script fonctionne très bien chez-moi mais je n'arrives pas à trouver comment dire au script de récupérer uniquement les <span> ayant la class "infobulle" par exemple. Car même lorsque l'attribut "title" est vide elle apparait sur 5 pixels de large...
Merci pour tous vos tutos. Ils me sont très utiles =D
A+
Mousse Il y a 1 an - Répondre
Essaye $('span.infobulle')
Ca doit être un truc comme ça.
alasvegas Il y a 1 an Répondre
Merci pour ce tuto il est super bien mais j'ai une question en fait quant je remplace la balise a par la balise area de map cela ne fonctionne pas qu'elle q'un à t - il une idée?
Acta Il y a 1 an Répondre
Super tuto. Merci
juste un petit je me suis rendu comte que sur les liens ou il n'y avait pas de title le navigateur retournai une erreur.
pour ceux que sa interesse. il manque une ligne dans la fonction mouseout. il faut remetre : if($(this).attr("title")=="")return false;
sinon la fonction mouseout s'execute quand title est vide
Merci encore
Acta Il y a 1 an
Desoler mais je vien de dire une connerie en rajoutant cette ligne la fonction mouseout ne s'execute plus. je cher la solution
Mousse Il y a 1 an - Répondre
C'est parce qu'il y a la ligne
$(this).attr('title', ''); dans la fonction mouseover qui lui dit de vider l'attribut title. Du coups dans la fonction mouseout il passe direct dans ton test IF que tu as écrit.
Si tu supprime cette ligne, ça marche. (Je n'ai pas bien compris pourquoi Grafikart écrit cette ligne d'ailleurs. Je suis encore trop débutant pour comprendre l'utilité de vider l'attribut title... ^^'
Topheur Il y a 2 ans Répondre
Excellent tuto.
Juste une question comment faire pour que la bulle ne se place pas en fonction du lien mais de la souris sur le lien ?
muaddhib Il y a 2 ans Répondre
Excellent tutoriel, merci beaucoup !!!
smartghost Il y a 2 ans Répondre
Merci, c'est un bon tuto ! j'ai un petit problème, l'infobulle marche nickel sauf que après 30 seconde du chargement de la page elle ne s'affiche plus !!! SVP je souhaiterais savoir comment résoudre le problème
Merci d'avance
Norland Il y a 2 ans Répondre
Bonjour!
Tout d'abord, je tenais a vous remercier pour ce super tuto, et je voulais savoir si, au lieu d'afficher un texte dans l'infobulle, je
je pouvais insérer une image, car je n'y arrive pas. En effet, je ne sais pas où placer mon <img src=""></img>
Merci d'avance!
aaktm Il y a 2 ans Répondre
c bon mais ca donne un erreur sur les versions internet explorer
voici une image pour mieux comprendre :
http://mwaheb.org/do.php?imgf=mw12843888151.jpg
Xeron Il y a 2 ans Répondre
Coment peut-on intégrer ce style d'info bulle sur Wordpress ? :S
Houly62 Il y a 2 ans Répondre
Merci beaucoup pour ce tuto !
Vérifiez bien que votre fichier javascript et bien lié à votre code, car moi je ne l'avez pas bien fait (mon arborescence n'étais pas bien écrite).
Maintenant tout est GOOD !
hico Il y a 2 ans Répondre
Bonjour et merci bien pour ce tuto, décidément ce site est un réel + pour apprendre !
C'est bien komodo edit que tu utilises non ?
Si oui, quelle version ? Je n'ai pas le même template, et je n'ai pas vu dans les options.
Merci bien
fef06 Il y a 2 ans Répondre
Bonjours a tous,
j'aimerai savoir comment on fait pour avoir une infobulle sur plusieurs "étage" comme si on ferai un <br /> ???
bibips Il y a 2 ans
En effet je me pose la même question que toi !
Peut-on mettre de l'HTML (voir du PHP) dans l'infobulle ?
Simwar Il y a 2 ans - Répondre
Bien sur Vu que tu recuperes le "title" du lien, mais tu peux recuperer une autre variable, et dans cette variable tu peux inserer n'importe quoi, php, html...
Alwin Il y a 2 ans Répondre
Excellent tutoriel comme d'habitude !
Par contre, j'ai un soucis avec le script sous FF 3.6.
J'ai deux liens cote à cote et lorsque je passe de l'un à l'autre, la ligne $(this).attr("title",bulle.text()); ajoute le titre sur les deux liens ... C'est étrange.
sqDQQ Il y a 2 ans Répondre
Q
Evy Il y a 2 ans Répondre
Baptiste ca n'est pas tres difficile si tu ecoutes bien les commentaires... MERCI encore pour ce tuto superbe!!
Danomagico Il y a 2 ans Répondre
Bonjour!
J'utilise ce système d'infobulles pour mon thème WordPress et j'ai un petit souci. J'applique mes infobulles à des images. L'infobulle apparait correctement, puis, quand je quitte l'image, le title ne se renouvelle pas ou alors, il se met sur le lien qui englobe l'image... Auriez-vous la solution à ce problème?
Merci d'avance!
dorso Il y a 2 ans Répondre
Merci bcp pour ce tuto de qualité.
Baptiste Il y a 2 ans Répondre
Salut,
pourrais t on faire pareil, mais sur le côté! mais pas au dessus.... j'ai pas encore compris les calculs, j'arrive pas à refaire!!
++
PS: à gauche car c'est un menu collé à droite
Baptiste Il y a 2 ans Répondre
C'est à dire? tu es est ou dans ton code?
Xeron Il y a 2 ans Répondre
J'arrive pas à adapter les infos-bulles à mes liens ayant un titre :/
Momox Il y a 2 ans Répondre
Merci beaucoup pour tes tutoriels. Grâce à toi j'ai compris pas mal de choses à jQuery.
cruchovic Il y a 2 ans Répondre
Salut j'ai fais un test avec une bulle transparent (.png) et ça fonctionne nickel sous FF, Chrome et un léger décalage (pas gênant) sous Opéra...
Par contre sous IE(8) que du caca... plus du tout d'opacité (soucis récurant liés à l'utilisation de .png sous ce navigateur), décalage de fou, bugg...Quelqu'un aurait-il une solution ?
Merki !
cruchovic Il y a 2 ans - Répondre
Nickel sous Safari;)
Nibdok Il y a 2 ans Répondre
Salut,
j'aurais une question assez simple je pense (mais pour quelqu'un s'y connaissant en jquery/javascript) : J'aimerais garder le principe d'affichage de ces infobulles mais j'aimerais que les infobulles s'affichent toutes au même endroit sur la page, plus précisément sous une liste de liens qui au fur et à mesure du temps risque de s'allonger...
est-ce possible?
Si jamais vous avez la possibilité de me donner une réponse merci d'avance et encore merci pour tous ces tutoriaux qui sont déjà d'une grande aide.
PS : j'ai créé un compte avec ce pseudo(nibdok) or lorsque je suis connecté il m'est impossible de poster des commentaires... T_T
Grafikart Il y a 2 ans
Pour ton souci de commentaire connecte toi à ton compte et édite le lien de ton "site" pour le laisser vide ou pour y mettre le lien de ton site web.
Sinon pour ton souci j'ai pas trop compris la question. Si tu veux que l'infobulle reste à un point fixe il faut que tu change la partie du tutoriel ou on positionne la bulle dynamiquement pour la positionner où tu le veux.
Nibdok Il y a 2 ans
Nickel plus de problème pour mettre un commentaire... merci
Pour essayer de vous expliquer ça un peu mieux : j'ai une div dans laquelle apparaissent des icones 30*30px (environ 5 icones par ligne). Ces icones permettent à l'utilisateur de voir mes sites amis et/ou que j'apprécie (ouais c'est des liens, dis comme ça c'est plus rapide mais vous reconnaitrez que c'est nettement moins de suspense pour le lecteur... bref).
Et en fait sous ces lignes d'icones, lorque l'on passe sur une icone apparait l'infobulle. Or j'aimerais que toutes les infobulles apparaissent exactement au même endroit. Or le souci étant d'après ce que j'ai compris en regardant le tutoriel, c'est qu'en jquery, cela donne une position absolue à une infobulle mais pas à l'ensemble.
De plus si au fur et à mesure que j'ajoute des icones je dois modifier à la main la position de mon infobulle ça risque d'être délicat ^^
J'espère que je me suis fait mieux comprendre et encore merci d'avance pour votre réponse.
Bonne journée et continuez comme ça
Badbart Il y a 2 ans
Dans ce cas la fait une div qui ce remplie au survol d'un lien.
Nibdok Il y a 2 ans - Répondre
ok je vais essayer ça
merci.
Legendary Il y a 2 ans Répondre
si on s'excite un peu sur les infosbulles, sur tous les autres liens, une infobulle apparait... normal ? même ceux dans ton exemple grafikart !
Skans Il y a 2 ans
+1 pour ce probleme, assez embêtant dans certain cas.
bagheera58 Il y a 2 ans - Répondre
Bonjour, quelqu'un a trouvé une solution à ce problème?
Vic Il y a 2 ans Répondre
Bon bin ça fonctionne maintenant ?! j'ai juste changé le premier /2 par un *0.5 ...
zouuuu !
Vic Il y a 2 ans Répondre
Salut et merci pour ce tuto !
J'ai juste un petit soucis au niveau de l'alignement de la bulle (elle ce décentre vers la gauche dés que le texte devient un peu "long" ?)
quelqu'un a-t-il le même soucis que moi ?
je pense que ça vient de cette ligne (qui parait pourtant bonne):
var posLeft = $(this).offset().left+$(this).width()/2-bulle.width()/2;
quelqu'un aurait il une idée pour la remplacer ?!
Merci
Ly3s Il y a 2 ans Répondre
Merci pour le tutoriel
@Loïc: Il utilise comme moi, Komodo Edit (Tourne sous Linux et Merdows), je te le conseil vivement :D
Loïc Il y a 2 ans Répondre
Salut et merci pour ce tuto très intèressant.
Qu'elle logiciel utilise tu pour coder ?
Alex Il y a 2 ans Répondre
Merci, c'est très pratique ce genre d'astuce !
PiGi Il y a 2 ans Répondre
J'ai trouvé : c'est SmartScroll ( http://www.marcmoini.com/sx_en.html ) qui mettait le binz !
Iguanes Il y a 2 ans Répondre
pas mal du tout !
Shaion Il y a 2 ans Répondre
Moi tout est niquel !
Franck55 Il y a 2 ans Répondre
Salut,
Pour même constat, vu avec opéra très flou on ne voit pas les détails et si je télécharge la vidéo c'est pire l'image lague à fond!
Dommage, merci tout de même pour ton super boulot comme d'hab!!
cerise Il y a 2 ans Répondre
J'ai re télécharger la vidéo.....mais le problème reste le même
C'est la première fois que cela arrive je n'ai jamais eu aucun problème avec les autres vidéos elle sont nickels
Merci d'avoir répondu
Grafikart Il y a 2 ans - Répondre
Je voulais tester un nouvel encodage permettant de réduire la taille avec une perte de qualité minimale, mais je pense qu'on va rester sur l'ancien du coup
PiGi Il y a 2 ans Répondre
Je précise (sur FF Mac) : La bulle n'apparaît qu'après un clic et bug en plus (vibration verticale)…
PiGi Il y a 2 ans Répondre
Arf, ce script semble incompatible avec Firefox (3.5.7) Mac OS (10.5.8) :-(
Marche très bien sur Safari sinon.
Baptiste Il y a 2 ans
J'ai exactement la même configuration et ça marche nickel!!
PiGi Il y a 2 ans
Mouai, doit y avoir un conflit avec un module ou autre, j'ai Firebug qui ne marche plus très bien non plus… Vais faire un petit nettoyage ;-)
Rapha Il y a 2 ans - Répondre
J'ai firebug 1.4.5 et Firefox 3.7 sous Vista ça marche super :/
cerise Il y a 2 ans Répondre
Merci beaucoup Badbart
j'ai essayer avec VLC media player.... et VHPlayer.....
finalement c'est Quick time qui l'emporte la vidéo est parfaite pour moi
encore merci à toi
Grafikart Il y a 2 ans
La vidéo est au format MP4 et le site vous faisait télécharger un .mov, ce qui semble expliquer votre problème. Maintenant c'est corriger le fichier se télécharge au bon format. Si vous pouviez me confirmer que cela fonctionne chez vous aussi
Badbart Il y a 2 ans - Répondre
Chez moi ça reste écran noir + son ok. Mais ça ne fait rien.
Tu as du changer un truc dans l'encodage, si tu veux a tout prix réglé le problème voila des infos :
Complete name : Grafikart - Tutoriel Focus - Blur.mov
Format : MPEG-4
Format profile : QuickTime
Codec ID : qt
File size : 80.5 MiB
Overall bit rate : 1 263 Kbps
Writing library : Apple QuickTime
--------------------------------
Complete name : Grafikart - Tutoriel Infobulle avec jQuery.mp4
Format : MPEG-4
Format profile : Base Media / Version 2
Codec ID : mp42
File size : 102 MiB
Overall bit rate : 921 Kbps
La 1ere marche bien, la deuxième non (dans les 2 version). Parement tu as changer le codec.
Je le répète c'est pas la mort ^^ Efface le com une fois lu, car il est un peu gros.
cerise Il y a 2 ans Répondre
Bizarre chez moi la vidéo n'est presque pas visible?
Suis-je la seule à avoir ce problème?
Merci de me répondre
Badbart Il y a 2 ans - Répondre
Non ça me fait pareil pour cette vidéo, avec Media Player Classic ça merde, obliger de la lire avec un autre lecteur. Rien de bien grave remarque.
Baptiste Il y a 2 ans Répondre
Ouais j'imagine! C'est du gros boulot! et toi tu n'as pas de tutoriel pour t'aider! lol
Sinon pourrais tu faire un tuto css sur les boutons flexibles (avec des images en background j'entends)? ça doit se faire rapido non ?
@+
Baptiste Il y a 2 ans Répondre
Nickel Jonathan! je venais de poser la question en plus sur le tuto webdesign! :p
Très réactif! on attend le méga tuto sur WP par contre! ça avance? lol
Bravo et merci!
Grafikart Il y a 2 ans - Répondre
Héhé no soucy, pour le tutoriel wordpress ça va arriver je fais le code une fois avant de le présenter en tutoriel et c'est assez long...
Rapha Il y a 2 ans Répondre
Merci, parfait comme toujours
A ce rythme là on va avoir 5-6 tutos par semaine Woah ! :;
rom07 Il y a 2 ans Répondre
Bravo, super pratique et joli en plus.
Merci beaucoup ! =)
darkavatars Il y a 2 ans Répondre
Bien comme tuto sa sera très utile
Ritter jack Il y a 2 ans Répondre
Très bon comme d'habitude !
Merci à toi
legendary Il y a 2 ans Répondre
merciii !
Ph3nol Il y a 2 ans Répondre
Encore une fois, du très bon travail ! Merci
Badbart Il y a 2 ans Répondre
Enfin une info bulle avec un minimum de style
MyKiwi Il y a 2 ans Répondre
Jolie !
Laisser un commentaire
multras Il y a 3 mois Répondre
Bonjour Jonathan,
Vraiment Merci cela m'a trop aidé dans un projet, mais je veux appliquer ce script sur des images dans un carousel jquery , et ça m'a créer un conflit de script , il y a une solution ?