Réaliser un slideshow en CSS - HoverBox
Un slideshow facile à réaliser : les photos s'agrandissent
au survol de la souris.
<div
class="formatter-block">
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<br
/>
Ouvrez le fichier hoverbox.css dans mon
bloc-note.
Pour changer le background :
<br
/>
<span
style="text-decoration: underline;">Pour mettre une image dans le background
: </span>
Vous pouvez soit mettre transparent, ou une
couleurs hexadécimal (#FFFFFF) ou encore le nom d'une
couleur(sécurisé pour le web).
/>
Pour le padding
c'est à vous de voir le réglage que vous souhaitez.
<span
style="color:#3366FF;">*le "Padding", c'est la distance entre le bord d'un
élément HTML et son contenu </span>
Et pour le width
c'est pareil.
*Le width permet de
spécifier la largeur d'un élément.
<h3
class="formatter-title">Placer ses images dans le code html</h3>
<br
/>
<br
/>
/>
<ul
class="formatter-ul">
[*]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.
</ul>
<br
/>
A vous de jouer !
au survol de la souris.
<div
class="formatter-block">
Hoverbox: Voir l'exemple | Télécharger ici ... (280 KB)
</div>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<br
/>
Ouvrez le fichier hoverbox.css dans mon
bloc-note.
Pour changer le background :
<br
/>
Code CSS :
body { background: #fff; color: #777; margin: 0 auto; padding: 50px; position: relative; width: 620px; }
<span
style="text-decoration: underline;">Pour mettre une image dans le background
: </span>
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 :
<br body {background:transparent url(images/global.png) no-repeat; }
/>
<span style="text-decoration:
underline;">Pour les couleurs :</span>
<ul
class="formatter-ul">
[*]<a
href="/articles/articles-0-2+palette-de-384-couleurs.php">Palette de 384
couleurs</a>
<a
href="/articles/articles-0-3+noms-des-couleurs-en-html.php"> Noms des
couleurs en HTML</a>
<li
class="formatter-li">
</li></ul>
underline;">Pour les couleurs :</span>
<ul
class="formatter-ul">
[*]<a
href="/articles/articles-0-2+palette-de-384-couleurs.php">Palette de 384
couleurs</a>
<a
href="/articles/articles-0-3+noms-des-couleurs-en-html.php"> Noms des
couleurs en HTML</a>
<li
class="formatter-li">
</li></ul>
Pour le padding
c'est à vous de voir le réglage que vous souhaitez.
<span
style="color:#3366FF;">*le "Padding", c'est la distance entre le bord d'un
élément HTML et son contenu </span>
Et pour le width
c'est pareil.
*Le width permet de
spécifier la largeur d'un élément.
<h3
class="formatter-title">Placer ses images dans le code html</h3>
<br
/>
Je procède de cette manière:
<br
/>
Code HTML :
<br <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 :
<ul
class="formatter-ul">
[*]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.
</ul>
<br
/>
A vous de jouer !