Réaliser un slideshow en CSS - HoverBox

Un slideshow facile à réaliser : les photos s'agrandissent au survol de la souris.

• 
• 
• 

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