-
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.
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é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"> </p>
<p id="img2"> </p>
<p id="img3"> </p>
<p id="img4"> </p>
<p id="img5"> </p>
<p id="img6"> </p>
<p id="img7"> </p>
<p id="img8"> </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>
...
...