Tu connais le rollover classique, mais si on jouait un peu pour en faire un autre?

C'est très simple, tu survoles la photo pour la voir dans une taille différente, si tu veux rester dessus, clique la

Thumb correspond à l'image miniature qui sera de 75x75 px

Et grande à l'image en grand, qui sera elle de 600x700px tu peux bien entendu mettre beaucoup plus de photos, à toi de voir.

Attention toutefois à ne pas alourdir ta page !!

N'oublie cependant pas de changer les url des photos !

Le codage du HTML :

    <img

src="http://idata.over-blog.com/0/08/59/55/rollover/thumb1.jpg" class="thumb" />


src="http://idata.over-blog.com/0/08/59/55/rollover/grande1.jpg" />
</img
<a

class="pics" tabindex="1" href="#nogo"><img

src="http://idata.over-blog.com/0/08/59/55/rollover/thumb2.jpg" class="thumb" />


src="http://idata.over-blog.com/0/08/59/55/rollover/grande2.jpg" />
<a

class="pics" tabindex="1" href="#nogo"><img

src="http://idata.over-blog.com/0/08/59/55/rollover/thumb3.jpg" class="thumb" />


src="http://idata.over-blog.com/0/08/59/55/rollover/grande3.jpg" />
<a

class="pics" tabindex="1" href="#nogo"><img

src="http://idata.over-blog.com/0/08/59/55/rollover/thumb4.jpg" class="thumb" />


src="http://idata.over-blog.com/0/08/59/55/rollover/grande4.jpg" />
<a

class="pics" tabindex="1" href="#nogo"><img

src="http://idata.over-blog.com/0/08/59/55/rollover/thumb5.jpg" class="thumb" />


src="http://idata.over-blog.com/0/08/59/55/rollover/grande5.jpg" />
  </img
</a
</img
</a
</img
</a
</img
</a

Codage à mettre en bas de ton CSS

/*------rollover------*/

#container {position:relative; width:600px; height:700px; background:transparent; border:px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:7px 21px; display:inline; color:#660000; text-decoration:none; width:75px; height:75px; cursor:default;}

#container a.pics img.thumb {display:block; border:1px solid #FFF;}

#container a.pics span {display:none; border:0; width:580px; background:transparent; border:1px solid #fff; text-align:center;}

#container a.pics span img {margin:10px auto; border:1px solid #CC9966}

#container a.pics:hover {white-space:normal;}

#container a.pics:hover img.thumb {border:1px solid #fff;}

#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:500px;}

#container a.pics:active img.thumb {border:1px solid #fc0;}

#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {outline:0;}

#container a.pics:focus img.thumb {border:1px solid #fc0}

#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:500px;} #container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1;}

#container span.info a {color:#000;}

#container span.info a:hover {text-decoration:none;}

/*---fin rollover---*/

PDF en téléchargement

Bon divertissement

Un fond et une bannière pour un blog de maman qui raconte sa grossesse ou l'après avec son bébé !
9 mois d'attente, est le nom de ce kit, un clic sur l'image pour la voir en taille réelle
Je peux vous personnaliser la bannière
PDF en téléchargement gratuit en fin d'article.
Tous mes créations sont faites à partir de kits achetés sur http://digital-crea.fr/

PDF en téléchargement gratuit