Accueil Boite à Outils Comment intégrer Snap Shots à Rapidweaver ?

Publié le : 26 avril 2007
Imprimer Imprimer cet article

Auteur :
Bertrand Hue

Bertrand Hue
Comment intégrer Snap Shots à Rapidweaver ?
Prévisualliser un site en survolant un lien

Suivre les instructions ne suffit pas. Pour obtenir la prévisualisation d’une page Internet en survolant un lien hypertexte grâce à Snap Shots dans une page créée avec Rapidweaver, encore faut-il connaître quelques astuces que nous allons vous expliquer. Bonne nouvelle, il n’est pas nécessaire de savoir utiliser du code HTML, le JAVA ou de savoir à quoi sert une balise.

Tout possesseur de Mac connaît Rapidweaver, logiciel simple d’utilisation, très intuitif, permettant de mettre en ligne un site médical ou personnel de bonne qualité. Doté de nombreux modules intégrés ou développés par des tiers, très faciles à manier, il fait partie des programmes de référence. Gérer un blog, diffuser des diaporamas en Flash, permettre le téléchargement de fichiers ou, tout simplement, publier des articles, modifiables facilement en ligne, peu de domaines échappent à Rapidweaver et à sa modularité.

Snap Shots est une solution gratuite, accessible en ligne, permettant de faire apparaître, pour des liens internes ou externes à son site, une image de la page pointée par le lien.

Façon rapide et simple d’avoir un premier aperçu d’un site distant, le visiteur ne sera pas contraint de cliquer systématiquement sur chaque lien pour l’ouvrir et finir ainsi par se perdre loin de votre page. Très rapide à mettre en œuvre grâce à quelques lignes de code Java obtenues immédiatement sur le site de Snap Shots, ce petit plus est accessible à tous, y compris aux créateurs de site débutants. Cette offre n’est pas dédiée au Mac. Elle peut s’intégrer dans n’importe quelle page.

Suivez le guide

Sur la page d’accueil de Snap Shots, il suffit de cliquer sur

PNG - 9.3 ko

La page suivante vous propose de personnaliser la bulle dans laquelle apparaîtra l’image du site vers lequel votre lien pointe.

Vous pouvez changer la couleur de remplissage, choisir l’endroit où le visiteur devra cliquer pour être dirigé vers la page liée (sur la bulle ou sur le lien, uniquement sur la bulle, uniquement sur le lien), intégrer votre logo (attention à sa taille). Concernant le choix « + d’options », il permet de sélectionner la langue de la bulle, la présence d’une barre de recherche dans la bulle, la possibilité de restreindre la visualisation aux seuls liens externes à votre site ou aux seuls liens internes. Le code généré sera différent en fonction des options choisies, il vous faut donc réfléchir avant à vos souhaits sinon il vous faudra comprendre comment fonctionne le code. Cliquez sur « Continuer ».

Après avoir renseigné l’adresse de son site, son adresse mail et accepté les modalités et conditions d’utilisation, un nouveau clic sur « Continuer » et tout paraît facile. Les explications sont données pour intégrer le code à sa page.

Attention aux balises

Malheureusement, ses explications sont erronées. Le code généré doit être collé entre les balises <head> </head> et non entre les balises actives <body> </body> comme indiqué. Erreur facile à trouver pour ceux qui ont donné une adresse de courriel valide et qui lisent l’anglais puisqu’un message est envoyé automatiquement avec, cette fois, les bonnes indications.

Le problème est que vous ne savez pas insérer du code, qu’une balise est une grande inconnue pour vous et que Java est une île... Pas de panique !

Ouvrez la page que vous avez créée avec Rapidweaver sur laquelle se trouve le (ou les liens) auquel vous voulez appliquer Snap Shots. Appelez l’inspecteur de page (en cliquant sur le , en bas à gauche, par exemple) et choisissez l’onglet « Code ». Trois possibilités vous sont ainsi offertes. C’est dans le cadre « JavaScript personnalisé » que vous allez intervenir. Inscrivez tout d’abord </script> puis coller tout le code commençant par <script type... que vous avez obtenu précédemment à la suite.

Et voilà, en procédant ainsi, vous pourrez mettre à jour ces pages sans perdre le code inséré.

Supprimer le titre

Dernière astuce : lorsque l’on ajoute un lien dans Rapidweaver, il est possible de donner un titre à ce lien. Ne remplissez pas ce champ ou si vous aviez choisi cette option, supprimez-la. Tout ceci se fait dans la fenêtre « Edition » de votre page web en cours de création ou de modification. Dans le cas qui nous intéresse, il convient d’utiliser la fonction « supprimer le lien ».

Dans mon cas, le simple fait de supprimer le contenu de l’option « Titre » n’a pas fonctionné, même en faisant réapparaître None en grisé, en enregistrant la page et en la publiant.

Une fois tous les liens supprimés, publiez les pages modifiées. Recréer les liens sans remplir l’option « Titre ». Publier à nouveau les pages transformées. Il peut être nécessaire de vider le cache de votre navigateur Internet pour voir le résultat de vos modifications.

De quoi rendre votre site plus dynamique et plus attractif, n’hésitez pas !




Cliquez ici pour réagir à cet article

 Imprimer Imprimer cet article