-
Diaporama 22
code:
<div id="fd">
<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>
<p id="comm">Clic sur les boutons pour afficher les images.</p>
<p id="tr0"><a href="#lien"><span style="color: red; text-shadow: 1px 1px black;">X</span></a></p>
<p id="tr1"><a href="#lien1"><span style="color: white; text-shadow: 1px 1px black;">1</span></a></p>
<p id="tr2"><a href="#lien2"><span style="color: white; text-shadow: 1px 1px black;">2</span></a></p>
<p id="tr3"><a href="#lien3"><span style="color: white; text-shadow: 1px 1px black;">3</span></a></p>
<p id="tr4"><a href="#lien4"><span style="color: white; text-shadow: 1px 1px black;">4</span></a></p>
<p id="ig1"> </p>
<p id="ig2"> </p>
<p id="ig3"> </p>
<p id="ig4"> </p>
</div>
</div>
<style><!--
#ancres a.ancre{display: none;}
#fd{position:relative;overflow:hidden; width:800px; height:600px; margin: 10px auto; border:4px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/uQBWPG8OhzSLjNB1Qo4XRtz-lgE/bk441.jpg');}
#comm{ position:absolute; z-index:1; transform:translate(100px,20px); width:600px; text-align:center; font-size:20pt;}
#tr0{position:absolute;z-index:5;transform:translate(770px,20px); font-size:25pt;}
#tr1{position:absolute;z-index:5;transform:translate(770px,70px); font-size:25pt;}
#tr2{position:absolute;z-index:5;transform:translate(770px,120px); font-size:25pt;}
#tr3{position:absolute;z-index:5;transform:translate(770px,170px); font-size:25pt;}
#tr4{position:absolute;z-index:5;transform:translate(770px,220px); font-size:25pt;}
#ig1{position:absolute; z-index:2; width:80px; height:600px; transition:all 1s linear; transform:translate(400px,0px) perspective(300px) rotatey(90deg); transform-origin:center top;
background:url('http://ekladata.com/5aY1lbZh3rSD7NexRGvdwfyWg-U/DSCN6082.jpg'); background-size:cover;}
#ig2{position:absolute; z-index:1; width:80px; height:600px; transition:all 1s linear; transform:translate(400px,0px) perspective(300px) rotatey(90deg) perspective(300px); transform-origin:center top;
background:url('http://ekladata.com/hQTcg_kDJRL3r5lZeCasgjYgCgM/DSCN6083.jpg'); background-size:cover;}
#ig3{position:absolute; z-index:1; width:80px; height:600px; transition:all 1s linear; transform:translate(400px,0px) perspective(300px) rotatey(90deg); transform-origin:center top;
background:url('http://ekladata.com/m1YYz4TZ7kbUTjia454-fbIKJqQ/DSCN6084.jpg'); background-size:cover;}
#ig4{position:absolute; z-index:1; width:80px; height:600px; transition:all 1s linear; transform:translate(400px,0px) perspective(300px) rotatey(90deg); transform-origin:center top;
background:url('http://ekladata.com/DscLO46kK2MaUlDuJZhuNdrv3LM/DSCN6085.jpg'); background-size:cover;}#ancres a#lien1:target ~ #ig1{ z-index:2; width:800px; transform:translate(0px,0px) rotatey(0deg);}
#ancres a#lien2:target ~ #ig2{ z-index:2; width:800px; transform:translate(0px,0px) rotatey(0deg); }
#ancres a#lien3:target ~ #ig3{ z-index:2; width:800px; transform:translate(0px,0px) rotatey(0deg); }
#ancres a#lien4:target ~ #ig4{ z-index:2; width:800px; transform:translate(0px,0px) rotatey(0deg); }
--></style>
...