• Afficher un montage plus large que la zone article.

    Vous connaissez peut-être le blog du petit randonneur 77, qui présente fort bien, des articles sur ses sorties, avec différentes rubriques que l'on retrouve d'un article sur l'autre, ce qui est bien pratique.

    L'inconvénient, à mon avis, est que son blog comporte 2 menus latéraux, ce qui limite la zone article et l'empêche de publier des montages dans des dimensions habituelles.

    Voici une proposition que je vais lui-faire, pour afficher un montage en 800x600px, en cliquant sur un bouton, placé dans son article, ce montage, au clic sur un bouton dans l'article, s'affichera au dessus de son article et de ses rubriques latérales et que l'on effacera après lecture.

    Cette page sera considérée comme sa zone article et le lien, au clic, pour afficher sera cette flèche et le bouton rouge qui s'affichera fermera la fenêtre.
    Dans le montage qui s'affichera, un survol de chaque nom affichera une nouvelle image.
    On peut mettre un montage type "défilé" mais rien avec un changement au clic.

    PIC 1


    PIC 2


    PIC 3


    <div id="ht">
    <div id="ancres"><a id="lien1" class="ancre"></a>
    <p id="tr0"><a href="#lien"><img src="http://ekladata.com/5vYRXqnn3UosWx7Y0xF1eIgstfw/btrec1.png" alt="" /></a></p>
    <p><a href="#lien1"><img src="http://ekladata.com/revk-ZXcSx9zlJ6qVpUNxnrYbbk/024.gif" alt="" /></a></p>
    <div id="mont">
    <p id="p1" style="font-size: 25pt; color: lime; text-shadow: 1px 1px black; font-weight: bold;">PIC 1</p>
    <br />
    <p id="p2" style="font-size: 25pt; color: lime; text-shadow: 1px 1px black; font-weight: bold;">PIC 2</p>
    <br />
    <p id="p3" style="font-size: 25pt; color: lime; text-shadow: 1px 1px black; font-weight: bold;">PIC 3</p>
    <img id="pic1" src="http://ekladata.com/AtEWBMtpmnTIV0zkvw78eR-6nTA/6613.jpg" alt="" /> <img id="pic2" src="http://ekladata.com/gdHMgZRRnx5ASMzilaf2fjEUp90/6614.jpg" alt="" /> <img id="pic3" src="http://ekladata.com/bQH8WT7bG8hOg8LU9EqINP3lQSY/6614b.jpg" alt="" /></div>
    </div>
    </div>

    <style type="text/css"><!--
    #mont{position:fixed; transform:translate(200px,-450px); width:800px; height:600px; margin:5px auto; background:url('http://ekladata.com/1QGpU-Lhy7ID5s8kEaHH_YODE3M/6612.jpg'); display:none;}
    #ancres a.ancre{display: none;}
    #tr0{position:absolute;transform:translate(0px,0px);z-index:15;display:none;}
    #p1{position:relative; text-align:center;width:100px; transform:translate(700px,100px);}
    #p2{position:relative; text-align:center; width:100px; transform:translate(700px,150px);}
    #p3{position:relative; text-align:center; width:100px; transform:translate(700px,200px);}
    #pic1{ position:absolute; transition:all 1s linear; width:0px; height:0px; transform:translate(400px,300px);}
    #pic2{ position:absolute; transition:all 1s linear; width:0px; height:0px; transform:translate(400px,300px);}
    #pic3{ position:absolute; transition:all 1s linear; width:0px; height:0px; transform:translate(400px,300px);}
    #ancres a#lien1:target ~ #mont, #ancres a#lien1:target ~ #tr0{display:block;}

    #p1:hover ~ #pic1{width:800px; height:600px; transform:translate(0px,-215px);}
    #p2:hover ~ #pic2{width:800px; height:600px; transform:translate(0px,-215px);}
    #p3:hover ~ #pic3{width:800px; height:600px; transform:translate(0px,-215px);}
    --></style>