Snap.com, c’est sympa mais j’ai mieux
Posté par Korben le 7 janvier 2007 | Laisser un commentaire (3) |
Voici une recette de mon cru que je suis fier de vous présenter !
Vous connaissez tous Snap.com ? Reflechissez mieux, je suis sûr que oui !
Il s’agit d’un site pseudo moteur de recherche qui propose surtout comme service d’afficher une fenĂŞtre avec la capture Ă©cran de votre site.
Pour vous montrer, ca donne ça:

Hmmm… c’est sympa non ? Mais ça le serait encore plus si ça ne passait pas par Snap.com et encore plus si il n’y avait pas ce petit moteur de recherche et leur logo partout !
Alors voici comment j’ai fait ! Ca se passe juste avec du xhtml et de la CSS !
Pour le HTML, c’est simple:
Petites explications. Vous crĂ©ez un lien html pointant vers le site de votre choix. Vous appliquez un style appelĂ© “screen” (class=”screen”). Le target=”_blank” veut dire que le lien s’ouvrira dans une nouvelle fenĂŞtre.
A l’intĂ©rieur du lien (dans les balises a href) vous placez le texte de votre lien mais aussi une balise image pointant vers l’url que vous placerez dans des balises
généralement utilisées pour mettre en gras mais qui seront utiles pour la CSS:
et après le symbole “=” vous rajoutez le lien de votre site.
Ce service non rĂ©fĂ©rencĂ© chez msnsearch permet d’avoir une capture Ă©cran d’un site en passant juste l’url. J’en connaissais un autre mais ça m’est sorti de la tĂŞte… Si vous le connaissez, n’hesitez pas a le poster dans les commentaires !
Exemple:
ce qui nous donne l’image suivante:
Ensuite, ca se passe au niveau de la CSS.
Dans votre feuille de style vous rajoutez le code suivant:
En gros, ce qui se trouve dans les balises b sera masqué.
Lorsque vous passerez la souris sur le lien, l’image sera rendu visible et encadrĂ© par un bord de 1 pixel avec un effet d’ombrage qui est en rĂ©alitĂ© l’image shadow.gif (faites clic droit -> tĂ©lĂ©charger pour l’enregistrer sur votre disque dur)
Et ca donnera ça:

Sympa non ?
Vous pouvez aller tester la chose sur le site www.exchangefortravel.org dans le menu Ă droite.
Et comme c’est que de la CSS, vous allez pouvoir le personnaliser comme bon vous semble !
J’suis pas sympa quand mĂŞme ?
Puis si il y a un warrior parmi vous, il peut rĂ©aliser un petit framework pour faire cela facilement (voir un plugin spip), je me ferais un plaisir d’heberger sa crĂ©ation (et pourquoi pas de l’utiliser :-))
Posté par Korben le 7 janvier 2007 | Laisser un commentaire (3) |








