-
Rollover sympa
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
<a
class="pics" tabindex="1" href="#nogo">
tabindex="1" href="#nogo">
tabindex="1" href="#nogo">
</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---*/
Bon divertissement
-
Commentaires
1Jaffy-Fleur de lysMercredi 14 Mars 2012 à 12:00très intéressant ton article, bisousRépondre2Tatarinette:0071:Mercredi 14 Mars 2012 à 12:00Bonjour Flo Vi vi vi!! j'ai vu le zozio sur le T !! trop sympa! j'adore la couleur de ce design. J'ai changé la couleur des textes modules car le bleu ciel était palot! je suis biEn contente et je te remercie encore, et encore.. Super ton astuce images!je reviendrai fouiller dans tes tiroirs après ..plus tard, et moi fouiller, j'adore ça!!!Surtout dans les "greniers" ou il y a des trésors! Gros bisous ma chère Flo.3Violette la VoisineMercredi 14 Mars 2012 à 12:00J'ai vu de bien jolies fleurs , plein cadre !!! Merci Flo et gros bisous4LaurentMercredi 14 Mars 2012 à 12:00Merci pour cette info. Je vais télécharger le PDF, ça m'intéresse beaucoup ! Bonne Soirée ma chère Flo Bisoux, Lolo5Flo-AvrilMercredi 14 Mars 2012 à 12:00Oui6Valentine :0056:Mercredi 14 Mars 2012 à 12:00Ouf, ça a l'air compliqué... Mais il est vrai que comme tu nous mâches tout... Il n'y a plus qu'à prendre le Pdf ? Merci, Flo !7lloriaMercredi 14 Mars 2012 à 12:00Merci pour tous les trucs et astuces :0004: Encore bravo pour ton superbe blog :0044: Nadine et Alain :0010:8GabianMercredi 14 Mars 2012 à 12:00Merci Flo pour ce Rollover...Je vais m'y essayer...Solution d'affichage sympa...Reste à voir dans la pratique ce que cela donne...Si j'y arrive! Bonne soirée9Flo-AvrilMercredi 14 Mars 2012 à 12:00Nous vous envoyons toute notre amitié10René-PierreMercredi 14 Mars 2012 à 12:00Bonsoir Flo, Je trouve ce partage généreux, et je suis certain que cela permettra à certain de réaliser des rellovers sur leur blog. Nous avons beaucoup aimé ce que tu fais, ce que tu partages, nous sommes très touchés par ta gentillesse. Affectueuses pensées à vous deux, René et Florence11renéJeudi 15 Mars 2012 à 12:00Bonjour flo ici il ne gèle jamais, mais en Belgique, il faut le mettre a l'abri avec de la lumière je te souhaite un agréable jeudi nos amitiés bises René1256MELDIX77 le BriardJeudi 15 Mars 2012 à 12:00bonjour FLO... bon jeudi ensoleille avec une pensee pour ces jeunes Belges AMICALEMENT 56MELDIX77 le Briard Breton13MartineJeudi 15 Mars 2012 à 12:00Je ne connaissais pas le rollover même classique. Je n'y connais rien en html, il faudrait que je prenne le temps de m'y mettre Flo. Bisous14:0014: ♥ dom ♥Jeudi 15 Mars 2012 à 12:00Bon jeudi. Bisoux15Tatarinette:0071:Jeudi 15 Mars 2012 à 12:00Merci Flo pour la banniere!!! Gros bisous16JeanJeudi 15 Mars 2012 à 12:00Oui, que drames.... la vie est si fragile.... terrible... très terrible....17cerise-decoJeudi 15 Mars 2012 à 12:00oui un roll over bissssssssssss18DicentimJeudi 15 Mars 2012 à 12:00Une belle journée à toi Flo et passe un bon jeudi. amicalement :-)19UlysseJeudi 15 Mars 2012 à 12:00Merci pour tous ces articles super intéressants, c'est vraiment sympa de nous donner toutes ces astuces. Amitiés.20QuichottineVendredi 16 Mars 2012 à 12:00C'est vraiment sympa... tu as raison. Je ne sais pas si je l'utiliserai, mais je saurais désormais où en trouver les explications. Bisous et douce journée, Flo.21Sagan33Vendredi 16 Mars 2012 à 12:00Super sympa ce roll over, je prends pour ce week end ! Bisous Flo, merci à toi. Geneviève22Le Chevalier DauphinVendredi 29 Juin 2012 à 12:00Vraiment sympa cette astuce. Elle me donne des idées pour comparer les contreforts des différents donjons romans de France.
Ajouter un commentaire