Pour continuer dans la mouvance des outils intéressant je viens de tomper sur celui de snapr qui permet d’afficher un thumbnail d’un lien lors d’un survol avec la souris.
Pour le faire marcher il faut la procédure suivante :
#Copy the contents of the previewbubble.zip file somewhere in your server. Edit previewbubble.js and point the bubbleImagePath variable to the correct location of the bg.png file. For example:
var bubbleImagePath = ‘/images/bg.png’;
#Include previewbubble.js in your header.
#Add class=”previewlink” attribute to the links you wish to bind the preview event to.
Et télécharger les scripts associés.
Pour wordpress l’installation est encore plus simple puisqu’il existe un plugin qui fait presque tout. Il faut simplement rajouter class=”previewlink” dans votre lien comme cela : class=”previewlink” href=”http://url”
Voici quelques exemples de ce que cela peut donner :
19 Comments
Tout simplement excellent!!
Cela ajoute une vrai valeur ajoutée aux liens sur un blog ou sur tout autre site.
Par contre, cele n’a pas l’air de marcher dans le flux RSS :/
Safari aime pas trop, il semble qu’il y ai un souci d’alignement.
Sin le rendu est sympa sous FF.
Puissant ! Ce qui serait intéressant, c’est de voir ce que ça donne avec une page pleine de plugins comme Flash ou Java. Techniquement, ils ont dû bien se casser la tête quand même.
Ca ne marche pas avec les plugins, dixit le site :
Following is the history of known bugs:
ActiveX controls and/or plugins will not be captured. (Oct-16-2006)
Je suis curieux de savoir comment c’est fait. Il y a quelques temps, je me demandais comment réaliser ce genre de chose.
Super ! Je cherchais à intégrer ce genre d’image dans Favolink et me demandais comment faire. Résultat : je ne fais rien et j’adapte/adopte ce petit script. Reste à voir si cela ne ralentit pas son site à l’affichage…
Sinon une question en passant : je cherche un site qui génére des images du genre badge ou sticker en forme d’etoile bien flashy, le genre que l’on voit fleurir sur les sites web ces derniers temps. Exactement comme celui que tu avais pour annoncer les inscriptions à French 2.0. Quelqu’un connait un site, un petit soft ,ou un tutoriel simple sous photoshop… à la limite ?
Pour Wordpress c’est tres bien… Pour le reste c’est connu depuis longtemps et meme breveté ;op
Ca s’appel un “ultralien” :
http://www.yellowpimento.net/lab/v2.0.html
peace
2° commentaire desolé :oD
Pour répondre à Cyrille, un tuto pour réaliser avec photoshop ce que tu cherches je penses : http://www.ajaxlessons.com/200.....-tutorial/
a noter que ce site est tres interessant pour apprendre des petits trucs “webdeuxpointzeroajaxien”
peace
Merci danYdan. Phillipe d’AccessOWeb a présenté ce site il y a quelques jours. Et c’est vrai que le tutoriel est super simple a réalisé… Mais je suis sûr d’avoir lu quelque chose sur un site proposant ce service… impossible de retrouver où ! Henri c’est toi qui a écrit sur le sujet ?
Bonjour,
J’ai testé ce script sur mon blog et j’ai un petit problème. (Dotclear) Je trouve un petit décalage qui devient très grand parfois concernant l’apparaition de la fenetre de prévisualisation. Par exemple dans ma deuxieme news, pour le lien “Channel Chooser”, la petite fenetre apparait 15 cm plus bas, on ne la voit plus.
Quelqu’un saurait pourquoi ?
Merci !
Cyrille tu penses à cela : http://www.2803.com/2006/09/29/tellement-vrai/
Grobigou pour moi cela marche très bien sur ton blog..
C’est exactement ce genre de badges et en parcourant les liens de l’article je suis tombé la dessus : http://designmeltdown.com/chapters/Badges/ et hop bookmarké ! Je vais donc me replonger dans PhotoShop mais je suis sûr qu’il y a bien site qui fabrique ces “badges 2.0″…
Oups j’en ai parlé ce matin et je n’avais pas vu que tu en avais parlé hier
(moi j’ai mis le mode d’emploi en français)
“thumbnail has been queued” : pas terrible
idée sympa sinon mais dépendre d’un service ça fait un peu 1er étape d’un piège …
Tom tu as ce message quand c’est la première fois que tu demandes un thumbnail… Ce qui me semble normal!
ok pour le message, mais ce que je critique c’est plus le fait d’être lié “powered by truc” donc dépendant (d’où le terme de piège)
ils peuvent du d’une minute à l’autre décider de supprimer le truc, de faire payer ou de mettre une pub à la place … c’est surement pas trop grave et supportable pour des sites perso mais pour des sites pro c’est très moyen
Tu sais qu’ils viennent juste de le mettre ce p$£*?! de message lors du post il n’y avait rien du tout!
Pour une utilisation pro il y a un paquet de solution qui existent mais sous la forme d’un script et non pas d’un plugin comme pour wordpress. Mais tu as raison sur le principe.
Et pour utilisation PRO vous suggérez quoi comme script ou service ?
Cyrille tu peux regarder girafa : http://www.girafa.com/
hi…good site.
One Trackback
[...] - Intégrer des thumbnails des liens que vous mettez sur votre blog est quelque chose de sympa et d’esthétique. Avant il y avait websnapr qui nécessitait la mise en place d’une balise sur le lien pour intégrer l’imagette maintenant plus besoin de tout cela! Snap marche tout seul et sans balisage de vos liens! Plus d’information chez Presse-Citron qui l’a mis en place. [...]