• Diaporama 21a

     

    Faites défiler les vignettes par l'ascenseur.
    Clic sur chaque vignette pour afficher l'image en grand format (800x600px).

    Le montage est au format 800x600px.

    X
























     

     

     

     

     

     

     

     

    Code:

    <div id="mont">
    <div id="ancres"><a id="lien1" class="ancre"></a><a id="lien2" class="ancre"></a><a id="lien3" class="ancre"></a> <a id="lien4" class="ancre"></a> <a id="lien5" class="ancre"></a> <a id="lien6" class="ancre"></a> <a id="lien7" class="ancre"></a> <a id="lien8" class="ancre"></a>
    <p id="comm">Faites d&eacute;filer les vignettes par l'ascenseur.<br />Clic sur chaque vignette pour afficher l'image en grand format (800x600px).<br /><br />Le montage est au format 800x600px.</p>
    <p id="tr0"><br /><br /><a href="#lien1"><img id="c1" src="http://ekladata.com/tVSeWu_-tVoAMdKeLgeXqpaDlak/DSCN6063.jpg" alt="" /></a><br /><br /><br /> <a href="#lien2"><img id="c1" src="http://ekladata.com/MpqoYzE9wmjMK7rvvZmjyWFBy9k/DSCN6064.jpg" alt="" /></a><br /><br /><br /> <a href="#lien3"><img id="c1" src="http://ekladata.com/08jRp_UyUZq5HCaOy6CByq7onB0/DSCN6065.jpg" alt="" /></a><br /><br /><br /> <a href="#lien4"><img id="c1" src="http://ekladata.com/lbvkmvlpQhsEuFTFiRWYOhN_DJE/DSCN6066.jpg" alt="" /></a><br /><br /><br /> <a href="#lien5"><img id="c1" src="http://ekladata.com/VArvemXSabhlG4cFOhL_bdPSEkI/DSCN6067.jpg" alt="" /></a><br /><br /><br /> <a href="#lien6"><img id="c1" src="http://ekladata.com/4hs82QE_rIAlWI2idXYZ5VoeutI/DSCN6068.jpg" alt="" /></a><br /><br /><br /> <a href="#lien7"><img id="c1" src="http://ekladata.com/-aefk9-vYRHAY5aF3q4Ckp0nwms/DSCN6069.jpg" alt="" /></a><br /><br /><br /> <a href="#lien8"><img id="c1" src="http://ekladata.com/UeGS87-YqEyi8mx9VLr1Vbl0rzk/DSCN6070.jpg" alt="" /></a></p>
    <p id="img1">&nbsp;</p>
    <p id="img2">&nbsp;</p>
    <p id="img3">&nbsp;</p>
    <p id="img4">&nbsp;</p>
    <p id="img5">&nbsp;</p>
    <p id="img6">&nbsp;</p>
    <p id="img7">&nbsp;</p>
    <p id="img8">&nbsp;</p>
    </div>
    </div>
    <style type="text/css"><!--
    #mont{position:relative; width:800px; height:600px; border:1px solid black; margin:10px auto; background:url('http://ekladata.com/UM7-cAwxvQ0lLzFhh1CPReOXYQY/silver4.jpg'); background-size:cover;}
    #ancres a.ancre{display: none;}
    #comm{position:absolute; transform:translate(100px,100px); width:500px; text-align:center; font-size:18pt;}
    #tr0{transform:translate(700px,30px);position:absolute;z-index:15; width:100px; height:100px; overflow:auto;}
    #c1{width:80px; height:60px;}
    #img1{position:absolute; z-index:1;transform:translate(0px,590px); transition:all 1s linear; width:800px; height:0px; background:url('http://ekladata.com/tVSeWu_-tVoAMdKeLgeXqpaDlak/DSCN6063.jpg'); background-size:cover;}
    #img2{position:absolute; z-index:1; transform:translate(0px,590px); transition:all 1s linear; width:800px; height:0px; background:url('http://ekladata.com/MpqoYzE9wmjMK7rvvZmjyWFBy9k/DSCN6064.jpg'); background-size:cover;}
    #img3{position:absolute; z-index:1; transform:translate(0px,590px); transition:all 1s linear; width:800px; height:0px; background:url('http://ekladata.com/08jRp_UyUZq5HCaOy6CByq7onB0/DSCN6065.jpg'); background-size:cover;}
    #img4{position:absolute; z-index:1; transform:translate(0px,590px); transition:all 1s linear; width:800px; height:0px; background:url('http://ekladata.com/lbvkmvlpQhsEuFTFiRWYOhN_DJE/DSCN6066.jpg'); background-size:cover;}
    #img5{position:absolute; z-index:1; transform:translate(0px,590px); transition:all 1s linear; width:800px; height:0px; background:url('http://ekladata.com/VArvemXSabhlG4cFOhL_bdPSEkI/DSCN6067.jpg'); background-size:cover;}
    #img6{position:absolute; z-index:1; transform:translate(0px,590px); transition:all 1s linear; width:800px; height:0px; background:url('http://ekladata.com/4hs82QE_rIAlWI2idXYZ5VoeutI/DSCN6068.jpg'); background-size:cover;}
    #img7{position:absolute; z-index:1; transform:translate(0px,590px); transition:all 1s linear; width:800px; height:0px; background:url('http://ekladata.com/-aefk9-vYRHAY5aF3q4Ckp0nwms/DSCN6069.jpg'); background-size:cover;}
    #img8{position:absolute; z-index:1; transform:translate(0px,590px); transition:all 1s linear; width:800px; height:0px; background:url('http://ekladata.com/UeGS87-YqEyi8mx9VLr1Vbl0rzk/DSCN6070.jpg'); background-size:cover;}

    #ancres a#lien1:target ~ #img1{z-index:5; height:600px; transform:translate(0px,0px);}
    #ancres a#lien2:target ~ #img2{z-index:5; height:600px; transform:translate(0px,0px);}
    #ancres a#lien3:target ~ #img3{z-index:5; height:600px; transform:translate(0px,0px);}
    #ancres a#lien4:target ~ #img4{z-index:5; height:600px; transform:translate(0px,0px);}
    #ancres a#lien5:target ~ #img5{z-index:5; height:600px; transform:translate(0px,0px);}
    #ancres a#lien6:target ~ #img6{z-index:5; height:600px; transform:translate(0px,0px);}
    #ancres a#lien7:target ~ #img7{z-index:5; height:600px; transform:translate(0px,0px);}
    #ancres a#lien8:target ~ #img8{z-index:5; height:600px; transform:translate(0px,0px);}
    --></style>


    ...