• 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" />

    Ardeche
    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" />

    Ardeche
    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" />

    septembre
    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" />

    Vacances
    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" />

    Lago del mis
    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---*/

     

    PDF en téléchargement

     

    Bon divertissement

    « Kit graphique gratuit n°31Sacré Toto »

  • Commentaires

    1
    Jaffy-Fleur de lys
    Mercredi 14 Mars 2012 à 12:00
    très intéressant ton article, bisous
    2
    Tatarinette:0071:
    Mercredi 14 Mars 2012 à 12:00
    Bonjour 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.
    3
    Violette la Voisine
    Mercredi 14 Mars 2012 à 12:00
    J'ai vu de bien jolies fleurs , plein cadre !!! Merci Flo et gros bisous
    4
    Laurent
    Mercredi 14 Mars 2012 à 12:00
    Merci pour cette info. Je vais télécharger le PDF, ça m'intéresse beaucoup ! Bonne Soirée ma chère Flo Bisoux, Lolo
    5
    Flo-Avril
    Mercredi 14 Mars 2012 à 12:00
    6
    Valentine :0056:
    Mercredi 14 Mars 2012 à 12:00
    Ouf, ç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 !
    7
    lloria
    Mercredi 14 Mars 2012 à 12:00
    Merci pour tous les trucs et astuces :0004: Encore bravo pour ton superbe blog :0044: Nadine et Alain :0010:
    8
    Gabian
    Mercredi 14 Mars 2012 à 12:00
    Merci 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ée
    9
    Flo-Avril
    Mercredi 14 Mars 2012 à 12:00
    Nous vous envoyons toute notre amitié
    10
    René-Pierre
    Mercredi 14 Mars 2012 à 12:00
    Bonsoir 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 Florence
    11
    rené
    Jeudi 15 Mars 2012 à 12:00
    Bonjour 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é
    12
    56MELDIX77 le Briard
    Jeudi 15 Mars 2012 à 12:00
    bonjour FLO... bon jeudi ensoleille avec une pensee pour ces jeunes Belges AMICALEMENT 56MELDIX77 le Briard Breton
    13
    Martine
    Jeudi 15 Mars 2012 à 12:00
    Je 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. Bisous
    14
    :0014: ♥ dom ♥
    Jeudi 15 Mars 2012 à 12:00
    Bon jeudi. Bisoux
    15
    Tatarinette:0071:
    Jeudi 15 Mars 2012 à 12:00
    Merci Flo pour la banniere!!! Gros bisous
    16
    Jean
    Jeudi 15 Mars 2012 à 12:00
    Oui, que drames.... la vie est si fragile.... terrible... très terrible....
    17
    cerise-deco
    Jeudi 15 Mars 2012 à 12:00
    oui un roll over bissssssssssss
    18
    Dicentim
    Jeudi 15 Mars 2012 à 12:00
    Une belle journée à toi Flo et passe un bon jeudi. amicalement :-)
    19
    Ulysse
    Jeudi 15 Mars 2012 à 12:00
    Merci pour tous ces articles super intéressants, c'est vraiment sympa de nous donner toutes ces astuces. Amitiés.
    20
    Quichottine
    Vendredi 16 Mars 2012 à 12:00
    C'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.
    21
    Sagan33
    Vendredi 16 Mars 2012 à 12:00
    Super sympa ce roll over, je prends pour ce week end ! Bisous Flo, merci à toi. Geneviève
    22
    Le Chevalier Dauphin
    Vendredi 29 Juin 2012 à 12:00
    Vraiment sympa cette astuce. Elle me donne des idées pour comparer les contreforts des différents donjons romans de France.
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


----