• Diapo dé

    Clic sur les points du dé.

     

    code du montage.
    <div style="width: 1000px; height: 563px; border: 4px ridge white; position: relative; overflow: hidden; margin: 10px auto;">
    <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="d">&nbsp;</p>
    <p id="bt1"><a href="#lien1"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
    <p id="bt2"><a href="#lien2"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
    <p id="bt3"><a href="#lien3"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
    <p id="bt4"><a href="#lien4"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
    <p id="im1"><img style="width: 1000px; height: 563px; float: left;" src="http://ekladata.com/C2FqWQmTSXTVNKLUk_uifOo9Tt4/corn1.jpg" alt="" /> <img style="width: 1000px; height: 563px; float: left;" src="http://ekladata.com/uXyh1qnJlQpFC96r0UkL7DS8_iA/corn2.jpg" alt="" /> <img style="width: 1000px; height: 563px; float: left; clear: left;" src="http://ekladata.com/ZcuB0_SLvZEXSacGUmlVOBCjHRg/corn3.jpg" alt="" /> <img style="width: 1000px; height: 563px; float: left;" src="http://ekladata.com/YkJPT-FY-Kr1B6rBsWkMdDNS75M/corn4.jpg" alt="" /></p>
    </div>
    </div>

    <style><!--
    #ancres a.ancre{display: none;}
    #d{position:absolute; z-index:2; transform:translate(920px,0px); width: 75px; height: 75px; border: 1px solid black; border-radius:10px; background-color: rgba(255,255,255,0.5);}
    #bt1{position:absolute;z-index:3; transform:translate(925px,5px);}
    #bt2{position:absolute;z-index:3; transform:translate(960px,5px);}
    #bt3{position:absolute;z-index:3; transform:translate(925px,40px);}
    #bt4{position:absolute;z-index:3; transform:translate(960px,40px);}
    #im1{position:absolute;z-index:1; transform:translate(0px,0px); transition:all 1s linear; width:2000px; height:1126px;}

    #ancres a#lien1:target ~ #im1{transform:translate(0px,0px);}
    #ancres a#lien2:target ~ #im1{transform:translate(-1000px,0px);}
    #ancres a#lien3:target ~ #im1{transform:translate(0px,-563px);}
    #ancres a#lien4:target ~ #im1{transform:translate(-1000px,-563px);}
    --></style>
    ...
    Le principe est de créer la fenêtre du montage, aux dimensions d'une image et de cacher ce qui dépasse (overflow:hidden;)
    Dans cette fenêtre, on place, en premier plan, les boutons (ici, des points sur un fond genre dé) et un cadre dans lequel on range les images (ici,4).
    La position de départ de ce cadre affiche l'image de l'angle haut/gauche (translate(0px,0px);) et le clic sur un bouton, cette position varie pour afficher une autre image, selon le rangement déterminé.
    ...