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 :

<div id="container">
    <a class="pics" tabindex="1" href="#nogo"><img

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

<span><img title="Ardeche" alt="Ardeche"

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

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

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

<span><img title="Ardeche" alt="Ardeche"

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

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

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

<span><img title="Septembre" alt="septembre"

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

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

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

<span><img title="Vacances" alt="Vacances"

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

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

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

<span><img title="Italie" alt="Lago del mis"

src="http://idata.over-blog.com/0/08/59/55/rollover/grande5.jpg" /></span></a>
  </div>
<div>
    &nbsp; <a class="pics" tabindex="1" href="#nogo"><span><br /></span></a>&nbsp; <a

class="pics" tabindex="1" href="#nogo"><span><br /></span></a>&nbsp; <a class="pics"

tabindex="1" href="#nogo"><span><br /></span></a>&nbsp;&nbsp;<a class="pics"

tabindex="1" href="#nogo"><span>&nbsp;</span></a>
  </div>
<div>
    <a class="pics" tabindex="1" href="#nogo"></a>
  </div>
<div>
    <span><br /></span>
  </div>

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