• Art.01A.5.21

    Essayons d'utiliser le pavé directionnel dans un montage, de 5 images au ratio 16/9.
    Nous pourrons faire ouvrir des pages contenant du texte, des liens ou des images à agrandir; à suivre donc !

    Clic

     

     

     

     

    <div style="position: relative; overflow: hidden; width: 1000px; height: 562px; margin: 15px auto; border: 1px solid black; text-align: left; background: url('http://ekladata.com/yxLxH579y0dt0nVIoJMNlHmqvjw.jpg'); background-size:cover;"><input id="haut" class="flc" type="text" /> <input id="droit" class="flc" type="text" /> <input id="bas" class="flc" type="text" /> <input id="gauche" class="flc" type="text" />
    <p id="drc">Clic</p>
    <p id="pgh" class="pg">&nbsp;</p>
    <p id="pgd" class="pg">&nbsp;</p>
    <p id="pgb" class="pg">&nbsp;</p>
    <p id="pgg" class="pg">&nbsp;</p>
    </div>

    <style><!--
    .flc{position:absolute; width:30px; height:30px; background:url('http://ekladata.com/GL3f0MSemCcwU-xBewze75ylETQ/rainb2.jpg'); background-size:cover; border:none; clip-path:polygon(0% 0%, 100% 0%, 50% 100%);}
    #haut{transform: rotate(0deg); margin:0 0 0 940px;}
    #droit{transform:rotate(90deg); margin:30px 0 0 970px;}
    #bas{transform:rotate(180deg); margin:60px 0 0 940px;}
    #gauche{transform:rotate(-90deg); margin:30px 0 0 910px;}
    #drc{position:absolute; width:30px; height:30px; margin:30px 0 0 940px; text-align:center; line-height:30px; font-size:12px;}
    .pg{position:absolute; z-index:5; width:1000px; height:562px; transition:all 1s;}
    #pgh{background:url('http://ekladata.com/SEajjUTYTTWzBdPSCJGblsTwN6U.jpg'); background-size:cover; transform:translate(0px,-562px);}
    #pgd{background:url('http://ekladata.com/jh4jekhUGNK7MsMzwaP6wjp-wbo.jpg'); background-size:cover; transform:translate(1000px,0px);}
    #pgb{background:url('http://ekladata.com/qoMXiIsQoIn9FEMcUW04JSJEqzs.jpg'); background-size:cover; transform:translate(0px,562px);}
    #pgg{background:url('http://ekladata.com/p9fm7G_309_CXU27N6fleF7aXA0.jpg'); background-size:cover; transform:translate(-1000px,0px);}
    #haut:focus ~ #pgh, #droit:focus ~ #pgd, #bas:focus ~ #pgb, #gauche:focus ~ #pgg{transform:translate(0px,0px);}
    --></style>