• Diaporama 21

    Ce montage reprend le principe de l'ascenseur (scrollbar) pour faire défiler les vignettes qui, au clic, déclenchent l'affichage de l'image correspondante dans le cadre principal.

    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.
























     

     

     

     

     

     

     

     

    Code du montage:

    <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>


    ...
    ...