Réaliser un slideshow en CSS - HoverBox
Introduction
Un slideshow facile à réaliser : les photos s'agrandissent au survol de la souris.
Hoverbox: Voir l'exemple | Télécharger ici ... (280 KB)
Vous venez de télécharger l'archive, vous la décompressez et ensuite il ne vous reste plus qu'à faire quelques modifications pour personnaliser le css. Ouvrez le fichier hoverbox.css dans votre bloc-note.
Pour changer le background :
Code CSS :
body { background: #fff; color: #777; margin: 0 auto; padding: 50px; position: relative; width: 620px; }
Pour mettre une image dans le background :
Vous pouvez soit mettre transparent, ou une couleurs hexadécimal (#FFFFFF) ou encore le nom d'une couleur(sécurisé pour le web).
Code CSS :
body {background:transparent url(images/global.png) no-repeat; }
Pour le padding c'est à vous de voir le réglage que vous souhaitez.
*le "Padding", c'est la distance entre le bord d'un élément HTML et son contenu
Et pour le width c'est pareil. *Le width permet de spécifier la largeur d'un élément.
Placer ses images dans le code html
Je procède de cette manière:
Code TPL :
<div class="hoverbox" style="margin-left: 2em;"> <ul class="hoverbox"> <li> <a href="/wiki/#"><img src="http://url de votre image.jpg" alt="description" title="Mon titre"> <img src="http://url de votre image.jpg" alt="description" title="Mon titre" class="preview" ></a> </li> <li><a href="/wiki/#"><img src="http://url de votre image.jpg" alt="description" title="Mon titre"> <img src="http://url de votre image.jpg" alt="description" title="Mon titre" class="preview"></a> </li> <li> <a href="/wiki/#"><img src="http://url de votre image.jpg" alt="description" title="Mon titre"> <img src="http://url de votre image.jpg" alt="description" title="Mon titre" class="preview"></a> </li> </ul>
Je remplace :
- http://url de votre image.jpg: Par l'url ou le dossier ou sont les images.
- description: Par la description de l'image.
- Mon titre: le titre de l'image.
A vous de jouer !
Maj le 14/08/2012 par Swan.