Dans ce tutoriel vidéo vous apprendrez à utiliser jQuery pour réaliser des infobulles animée sur vos liens. Le principe du script sera d'utiliser l'attribut "title" des liens afin de définir le contenu des infobulles...
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
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 ?
@+
cerise(Lundi 11 Janvier 2010 à 20:44):
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(Lundi 11 Janvier 2010 à 20:56):
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.
cerise(Lundi 11 Janvier 2010 à 21:06):
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
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(Mardi 12 Janvier 2010 à 12:36):
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.
PiGi(Mardi 12 Janvier 2010 à 11:43):
Arf, ce script semble incompatible avec Firefox (3.5.7) Mac OS (10.5.8) :-(
Marche très bien sur Safari sinon.
J'ai exactement la même configuration et ça marche nickel!!
PiGi(Mardi 12 Janvier 2010 à 15:05):
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(Mardi 12 Janvier 2010 à 17:17):
J'ai firebug 1.4.5 et Firefox 3.7 sous Vista ça marche super :/
PiGi(Mardi 12 Janvier 2010 à 11:45):
Je précise (sur FF Mac) : La bulle n'apparaît qu'après un clic et bug en plus (vibration verticale)…
cerise(Mardi 12 Janvier 2010 à 13:05):
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
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
Franck55(Mardi 12 Janvier 2010 à 13:47):
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!!
@Loïc: Il utilise comme moi, Komodo Edit (Tourne sous Linux et Merdows), je te le conseil vivement :D
Vic(Lundi 18 Janvier 2010 à 15:17):
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
Vic(Lundi 18 Janvier 2010 à 16:46):
Bon bin ça fonctionne maintenant ?! j'ai juste changé le premier /2 par un *0.5 ...
zouuuu !
Legendary(Mardi 19 Janvier 2010 à 17:45):
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(Mercredi 17 Février 2010 à 14:01):
+1 pour ce probleme, assez embêtant dans certain cas.
bagheera58(Mercredi 18 Août 2010 à 15:17):
Bonjour, quelqu'un a trouvé une solution à ce problème?
Nibdok(Mardi 19 Janvier 2010 à 22:21):
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
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(Mercredi 20 Janvier 2010 à 17:08):
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(Mercredi 20 Janvier 2010 à 19:09):
Dans ce cas la fait une div qui ce remplie au survol d'un lien.
Nibdok(Jeudi 21 Janvier 2010 à 12:06):
ok je vais essayer ça
merci.
cruchovic(Jeudi 21 Janvier 2010 à 16:18):
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(Jeudi 21 Janvier 2010 à 16:26):
Nickel sous Safari;)
Momox(Dimanche 31 Janvier 2010 à 16:28):
Merci beaucoup pour tes tutoriels. Grâce à toi j'ai compris pas mal de choses à jQuery.
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?
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.
fef06(Samedi 27 Mars 2010 à 17:51):
Bonjours a tous,
j'aimerai savoir comment on fait pour avoir une infobulle sur plusieurs "étage" comme si on ferai un <br /> ???
Si vous rencontrez un problème avec votre code et que vous avez une question spécifique utilisez plutôt les questions pour avoir une réponses rapide.
Suivre les commentaires de ce tutoriel