Diaporama clip 3

Clic sur les boutons.

<div id="ancres" style="width: 800px; height: 600px; margin: 10px auto; border: 6px ridge white;"><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>
<p id="tr0"><a href="#lien"><img src="http://ekladata.com/Chii0wI_EollV37evuA4sBLk8n8/btd.png" alt="" /></a></p>
<p id="tr1"><a href="#lien1"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr2"><a href="#lien2"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr3"><a href="#lien3"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr4"><a href="#lien4"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr5"><a href="#lien5"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr6"><a href="#lien6"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="img0" style="background: url('http://ekladata.com/uReCxkJnv46giiBtS-c6ovfN6CY/img728.gif'); background-size: contain;">&nbsp;</p>
<p id="img1"><img src="http://ekladata.com/JJr-L_we6_94-HMAIFD-Lxa07_U/DSCN6334.jpg" alt="" /></p>
<p id="img2"><img src="http://ekladata.com/OT7w4lYIb3sZhqMgmMSm65VhZXI/DSCN6335.jpg" alt="" /></p>
<p id="img3"><img src="http://ekladata.com/u5syV5OYE94LG8eSiH_dDQvMHHI/DSCN6336.jpg" alt="" /></p>
<p id="img4"><img src="http://ekladata.com/bqXUpLNkEoFM2cHDAXEmyv6UD0o/DSCN6343.jpg" alt="" /></p>
<p id="img5"><img src="http://ekladata.com/wajEHSIgytNQU_Q34uZlNEsAfNY/DSCN6349.jpg" alt="" /></p>
<p id="img6"><img src="http://ekladata.com/vgxsA2JDA1Sgp9Lg5zwEkI2vqHM/DSCN6357.jpg" alt="" /></p>
</div>
<p>&nbsp;</p>
<p>...<br>...<br>...</p>
<style type="text/css"><!--
#ancres a.ancre{display: none;}
#tr0{transform:translate(20px,20px);position:absolute;z-index:15;}
#tr1{position:absolute;z-index:10;transform:translate(20px,70px);}
#tr2{position:absolute;z-index:10;transform:translate(20px,120px);}
#tr3{position:absolute;z-index:10;transform:translate(20px,170px);}
#tr4{position:absolute;z-index:10;transform:translate(20px,220px);}
#tr5{position:absolute;z-index:10;transform:translate(20px,270px);}
#tr6{position:absolute;z-index:10;transform:translate(20px,320px);}

#img0{width:800px;height:600px;position:absolute;}
#img1{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: translate(-230px,-150px) scale(0.35) ; transition: all 2s ease;}
#img2{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: translate(-230px,100px) scale(0.35); transition: all 2s ease;}
#img3{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: translate(-70px,-25px) scale(0.35) ; transition: all 2s ease;}
#img4{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: translate(90px,-150px) scale(0.35) ; transition: all 2s ease;}
#img5{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: translate(90px,100px) scale(0.35) ; transition: all 2s ease;}
#img6{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: translate(250px,-25px) scale(0.35) ; transition: all 2s ease;}

#ancres a#lien1:target ~ #img1{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
#ancres a#lien2:target ~ #img2{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
#ancres a#lien3:target ~ #img3{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
#ancres a#lien4:target ~ #img4{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
#ancres a#lien5:target ~ #img5{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
#ancres a#lien6:target ~ #img6{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
--></style>

...
...