Korben, roi d’internet, logo bébé avec des lunettes en mode thug life Korben, roi d’internet, logo bébé avec des lunettes en mode thug life

Korben Upgrade your mind

Snap.com, c’est sympa mais j’ai mieux

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:


Mon site
src="http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=https://korben.info">

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:

"http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r="
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:
http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=https://korben.info

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:

a.screen b {
position:absolute;
visibility:hidden; /* hide the image */
}

a.screen:hover {
text-decoration:none;
z-index:1000;
background:url(shadow.gif) no-repeat;
}

a.screen:hover b {
visibility:visible; /* make the image visible */
z-index:500;
border:solid 1px #ccc;
}
a.screen:hover b img {
margin:0px;
}

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 :-))


Travis Touch – Traducteur Électronique Intelligent avec 105 langues

Traductions faciles & Hotspot Internet

105 Langues

Travis Touch est le traducteur intelligent par excellence qui tient dans la paume de votre main. Créez des liens significatifs avec les personnes que vous rencontrez. Que ce soit pour vos loisirs ou les affaires, Travis Touch permet un monde sans barrières linguistiques, traduisant à partir de 105 langues, plus que n’importe quel autre appareil.

Travis Touch écoute ce que vous dites, le traduit dans la langue sélectionnée et lit la traduction en temps réel par son haut-parleur. Votre interlocuteur peut alors s’exprimer dans sa propre langue et Travis traduira pour vous.

En Savoir +



Comment découper une carte SIM sans la bousiller

vec certains téléphone, ça devient une vraie galère au niveau des cartes SIM. Entre la SIM classique (MiniSIM), la MicroSIM et la NanoSIM, difficile de s’y retrouver et surtout de passer d’une plus grande à une plus petite sans devoir attendre que les opérateurs veuillent bien se donner la peine de vous l’envoyer…

Lire la suite


6 outils pour cloner un disque dur sous Windows et Linux

Cloner c’est facile… Bon, ok, cloner un bébé, c’est déjà plus complexe mais un disque dur, c’est l’enfance de l’art… Alors bien sûr le logiciel le plus connu pour ça, est Ghost de Symantec mais au prix de 999,99 euros HT (j’déconne, je ne connais pas le prix en vrai), c’est déjà plus rentable de se mettre à cloner son petit frère artisanalement dans le garage…

Lire la suite