Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
Un slideshow facile à réaliser : les photos s'agrandissent au survol de la souris.

  • descriptiondescription
  • descriptiondescription
  • descriptiondescription








Première étape :

Allez chez Hoverbox

Cliquez sur Hoverbox: Download Here (280 KB)

Vous venez de télécharger un fichier .zip : un ensemble de fichiers compressés.

Pour les décompresser, j'utilise WinRAR - extraire vers.

Les 2 fichiers qui nous intéressent sont : hoverbox.css et ie_fixes.css

Deuxième étape :

Pour que le rendu soit bon sur OverBlog, j'ai dû ouvrir le fichier hoverbox.css dans mon bloc-note et effacer le background, le padding et le width dans la ligne body.

body {background: #fff; color: #777;margin: 0 auto; padding: 50px; position: relative;width: 620px;}

Elle a maintenant cet aspect :

body{color: #777; margin: 0 auto; position: relative;}

Troisième étape :

En Confiance : j'héberge ces fichiers sur ArchiveHost et je note les adresses

En Privilège et Premium : Dans mon administration - documents - autres fichiers :
  • j'ai créé un répertoire hoverbox
  • dans lequel j'ai enregistré :
  • hoverbox.css
  • ie_fixes.css
  • je note les adresse de ces fichiers
  •  
Quatrième étape :

Lorsque je place les images, en mode source, je colle

<div class="hoverbox" style="margin-left: 2em;">
<ul>
    <li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo01.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo01.jpg" /></a></li>
    <li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo02.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo02.jpg" /></a></li>
    <li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo03.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo03.jpg" /></a></li>
</ul>
<!--[if IE]>
<link rel="stylesheet" href='http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]--></div>
<link media="screen, projection" type="text/css" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/css/hoverbox.css" rel="stylesheet" />

En rouge, les adresses des images
En bleu, les adresses des fichiers

MàJ : Janvier 2009

Voir les 4 commentaires - Ecrire un commentaire
Recommander
Retour à l'accueil

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

Recherche Rapide Sur le Site

Commentaires

Publicité

Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus