• Diaporama 22

    Clic sur les boutons pour afficher les images.

    X

    1

    2

    3

    4

     

     

     

     

    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">&nbsp;</p>
    <p id="ig2">&nbsp;</p>
    <p id="ig3">&nbsp;</p>
    <p id="ig4">&nbsp;</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>


    ...