• Mont.5.4.23

     1 + 6 images au ratio 16/9, en 1000x563px, divisées en 2 et commandées par 6 boutons 1 à 6 . Animation plus agréable en cliquant les boutons dans l'ordre 1 à 6 ou l'inverse.

    Chaque clic sur un bouton commande l'animation des deux parties d'une image.

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/1c73jI7xXewtNxGtCEfml_hnKRk.jpg'); background-size: cover;"><input id="bta" class="bt" type="text" value="1" /><input id="btb" class="bt" type="text" value="2" /><input id="btc" class="bt" type="text" value="3" /><input id="btd" class="bt" type="text" value="4" /><input id="bte" class="bt" type="text" value="5" /><input id="btf" class="bt" type="text" value="6" />
    <p id="mg1a" class="mg">&nbsp;</p>
    <p id="mg1b" class="mg">&nbsp;</p>
    <p id="mg2a" class="mg">&nbsp;</p>
    <p id="mg2b" class="mg">&nbsp;</p>
    <p id="mg3a" class="mg">&nbsp;</p>
    <p id="mg3b" class="mg">&nbsp;</p>
    <p id="mg4a" class="mg">&nbsp;</p>
    <p id="mg4b" class="mg">&nbsp;</p>
    <p id="mg5a" class="mg">&nbsp;</p>
    <p id="mg5b" class="mg">&nbsp;</p>
    <p id="mg6a" class="mg">&nbsp;</p>
    <p id="mg6b" class="mg">&nbsp;</p>
    </div>
    <style><!--
    .bt{position:absolute; z-index:5; width:25px; height:25px; border-radius:50%; border:1px solid black; background-color:white; text-align:center;}
    #bta{transform:translate(400px,0px);}
    #btb{transform:translate(450px,0px);}
    #btc{transform:translate(500px,0px);}
    #btd{transform:translate(550px,0px);}
    #bte{transform:translate(600px,0px);}
    #btf{transform:translate(650px,0px);}
    .mg{position:absolute; z-index:2; width:0px; height:563px; transition:all 1s;}
    #mg1a{background:url('http://ekladata.com/ffvzJ6ZwURu9nnxjnuolGkCIoQQ.jpg'); background-size:1000px 563px;background-position:0px 0px; transform:translate(0px, 0px); }
    #mg1b{background:url('http://ekladata.com/ffvzJ6ZwURu9nnxjnuolGkCIoQQ.jpg'); background-size:1000px 563px; background-position:-1000px 0px; transform:translate(1000px, 0px); }
    #mg2a{background:url('http://ekladata.com/Y-u9yUQBkI61eVCwL485NshjimQ.jpg'); background-size:1000px 563px;background-position:-500px 0px; transform:translate(500px, 0px); }
    #mg2b{background:url('http://ekladata.com/Y-u9yUQBkI61eVCwL485NshjimQ.jpg'); background-size:1000px 563px; background-position:-500px 0px; transform:translate(500px, 0px); }
    #mg3a{background:url('http://ekladata.com/ptGLueCcneCul2woQulZudHtsZM.jpg'); background-size:1000px 563px;background-position:0px 0px; transform:translate(0px, 0px); }
    #mg3b{background:url('http://ekladata.com/ptGLueCcneCul2woQulZudHtsZM.jpg'); background-size:1000px 563px; background-position:-1000px 0px; transform:translate(1000px, 0px); }
    #mg4a{background:url('http://ekladata.com/djH05o8wKMRlkUg-c471S8b_9U0.jpg'); background-size:1000px 563px;background-position:-500px 0px; transform:translate(500px, 0px); }
    #mg4b{background:url('http://ekladata.com/djH05o8wKMRlkUg-c471S8b_9U0.jpg'); background-size:1000px 563px; background-position:-500px 0px; transform:translate(500px, 0px); }
    #mg5a{background:url('http://ekladata.com/IskqBTlTBjkiEm38baN4IFtu59s.jpg'); background-size:1000px 563px;background-position:0px 0px; transform:translate(0px, 0px); }
    #mg5b{background:url('http://ekladata.com/IskqBTlTBjkiEm38baN4IFtu59s.jpg'); background-size:1000px 563px; background-position:-1000px 0px; transform:translate(1000px, 0px); }
    #mg6a{background:url('http://ekladata.com/ZelTGvkFALTEEko086wGHMkGTJQ.jpg'); background-size:1000px 563px;background-position:-500px 0px; transform:translate(500px, 0px); }
    #mg6b{background:url('http://ekladata.com/ZelTGvkFALTEEko086wGHMkGTJQ.jpg'); background-size:1000px 563px; background-position:-500px 0px; transform:translate(500px, 0px); }
    .bt:focus{background:green;}
    #bta:focus ~ #mg1a,#btb:focus ~ #mg2a,#btc:focus ~ #mg3a,#btd:focus ~ #mg4a,#bte:focus ~ #mg5a,#btf:focus ~ #mg6a{z-index:4; width:500px; background-position:0px 0px; transform:translate(0px,0px);}
    #bta:focus ~ #mg1b,#btb:focus ~ #mg2b,#btc:focus ~ #mg3b,#btd:focus ~ #mg4b,#bte:focus ~ #mg5b,#btf:focus ~ #mg6b{z-index:4; width:500px; background-position:-500px 0px; transform:translate(500px,0px);}
    --></style>