Créer un slideshow avec hoverBox

Un slideshow facile à réaliser en CSS : 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 :

Dans l'administration de votre blog - documents - autres fichiers :

• Vous créez un répertoire hoverbox
• dans lequel vous enregistrez :
• hoverbox.css
• ie_fixes.css
• Vous notez les adresses de ces fichiers

Troisième étape :

En HTML, vous collez

<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