• Ascenseur ou non

    Une possibilité pour éviter, à vos visiteurs, de jouer de l'ascenseur, tout en affichant vos photos en grand format (1200x675px): des boutons font monter chaque image en haut de page; ma première version conservait le rôle de l'ascenseur mais l'article restait très haut, ce qui n'était pas très agréable; code en bas de page.

    1

    2

    3

    4

    5

    6

    7

     

    Le code avec 7 images en 1200x675px.
    ...

    <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>
    <p id="bt1"><a href="#lien1"><span style="color: white; text-shadow: 1px 1px black;">1</span></a></p>
    <p id="bt2"><a href="#lien2"><span style="color: white; text-shadow: 1px 1px black;">2</span></a></p>
    <p id="bt3"><a href="#lien3"><span style="color: white; text-shadow: 1px 1px black;">3</span></a></p>
    <p id="bt4"><a href="#lien4"><span style="color: white; text-shadow: 1px 1px black;">4</span></a></p>
    <p id="bt5"><a href="#lien5"><span style="color: white; text-shadow: 1px 1px black;">5</span></a></p>
    <p id="bt6"><a href="#lien6"><span style="color: white; text-shadow: 1px 1px black;">6</span></a></p>
    <p id="bt7"><a href="#lien7"><span style="color: white; text-shadow: 1px 1px black;">7</span></a></p>
    <p id="img1"><img src="http://ekladata.com/N3Rijisp9RV3sJMi923INiGnfMM/5885.jpg" alt="" /></p>
    <p id="img2"><img src="http://ekladata.com/R0597JLLGlATqkcnkO3APc9eKzI/5886.jpg" alt="" /></p>
    <p id="img3"><img src="http://ekladata.com/6Rwe9lCSb1C6j_6DIw4sNkS4sTg/5887.jpg" alt="" /></p>
    <p id="img4"><img src="http://ekladata.com/R_KTjduViKRf5BC9GmUU2ZXZNGQ/5888f.jpg" alt="" /></p>
    <p id="img5"><img src="http://ekladata.com/hUWKZ-ZepgoKd80M3ZVpdy2wv5E/5889.jpg" alt="" /></p>
    <p id="img6"><img src="http://ekladata.com/X4mrlECNfXaqXTNBilZcYePig2o/5890.jpg" alt="" /></p>
    <p id="img7"><img src="http://ekladata.com/SI-FTtXjgUyIrDE9go5zm1IGPPQ/5891.jpg" alt="" /></p>
    </div>
    </div>
    <hr style="clear: both; margin: 50px auto;" />

    <style type="text/css"><!--
    #mont{position:relative; width:1200px; height:675px; transform:translate(0px,0px); overflow:hidden;}
    #ancres a.ancre{display: none;}
    #bt1{position:fixed; transform:translate(1150px,30px); z-index:15; font-size: 45px;}
    #bt2{position:fixed; transform:translate(1150px,80px); z-index:15; font-size: 45px;}
    #bt3{position:fixed; transform:translate(1150px,130px); z-index:15; font-size: 45px;}
    #bt4{position:fixed; transform:translate(1150px,180px); z-index:15; font-size: 45px;}
    #bt5{position:fixed; transform:translate(1150px,230px); z-index:15; font-size: 45px;}
    #bt6{position:fixed; transform:translate(1150px,280px); z-index:15; font-size: 45px;}
    #bt7{position:fixed; transform:translate(1150px,330px); z-index:15; font-size: 45px;}
    #img1{ position:absolute; z-index:1; transition:all 1s linear;transform:translate(0px,0px); width:1200px;height:675px;}
    #img2{position:absolute; z-index:2; transition:all 1s linear; transform:translate(0px,675px);width:1200px;height:675px;}
    #img3{position:absolute; z-index:2;transition:all 1s linear; transform:translate(0px,675px);width:1200px;height:675px;}
    #img4{position:absolute; z-index:2;transition:all 1s linear; transform:translate(0px,675px);width:1200px;height:675px;}
    #img5{position:absolute; z-index:2;transition:all 1s linear; transform:translate(0px,675px);width:1200px;height:675px;}
    #img6{position:absolute; z-index:2;transition:all 1s linear; transform:translate(0px,675px);width:1200px;height:675px;}
    #img7{position:absolute; z-index:2;transition:all 1s linear; transform:translate(0px,675px);width:1200px;height:675px;}
    #ancres a#lien1:target ~ #img1{transform:translate(0px,0px);}
    #ancres a#lien2:target ~ #img2{transform:translate(0px,0px);}
    #ancres a#lien3:target ~ #img3{transform:translate(0px,0px);}
    #ancres a#lien4:target ~ #img4{transform:translate(0px,0px);}
    #ancres a#lien5:target ~ #img5{transform:translate(0px,0px);}
    #ancres a#lien6:target ~ #img6{transform:translate(0px,0px);}
    #ancres a#lien7:target ~ #img7{transform:translate(0px,0px);}
    --></style>