Votre espace

 



Question aléatoire

Qu'est-ce que Chez-Swan.net ?
Livre d'or

Par bdcone

Tres bon site web !!!! de grande qualité

Livre d'or

Statistiques

853 membres inscrits

Dernier membre:
yami01

Plus de stats

Vous soutenez CsN :


Sur les 3 derniers mois ...

[13/06/13] Juliette.H: €10.00

[31/05/13] Xtian: €10.00

[24/05/13] Steve.D: €10.00

[13/05/13] Damien.F: €10.00

[12/05/13] Mathieu.C: €10.00

[02/05/13] Xtian: €10.00

[31/03/13] Xtian: €10.00

[19/03/13] Lucho03: €10.00

[27/02/13] Xtian: €10.00

[26/02/13] Striker: €15.00

[30/01/13] Xtian: €20.00

[29/12/12] Xtian: €20.00

[01/12/12] Rudyos: €5,00

[29/11/12] Xtian: €20.00

[16/11/12] Sanfandrafa: €10,00

[12/11/12] Hight_Tower: €10,00

[06/11/12] Harper: €15,00

[31/10/12] Xtian: €20.00

[31/10/12] Laurent.L: €25.00

[24/10/12] Nicolas.P: €5.00

[21/10/12] Vincent.D: €10.00

[19/10/12] Mickael: €10.00

[06/10/12] Xtian: €15.00

[01/10/12] Hight_Tower: €20.00
..........................................
Nous vous remercions !
..........................................
Nous soutenir ?
Mini sondage
Sur CsN, vous appréciez:










Résultats

En ligne
6 Visiteurs, 1 Membre, 0 Modérateur, 0 Administrateur En ligne.

janus57
unknow_bot
Total : 7
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 les couleurs :



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.



 
Cette page a été vue 2033 fois   |   Dernières modifications par : Swan