• 6 clics

    Une demande pour un montage de 6 images au clic; sur ma lancée, j'ai mis la première image en fond de montage et 6 boutons au clic donc, 7 images au total; j'espère que ça conviendra tout de même.

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto; background: url('http://ekladata.com/cW5ms3WsBgcladK6mGbXvz7aF34@1536x864.jpg'); background-size: 60vw 33.75vw; text-align:left;"><input id="cd1" class="cde" type="text" value="A" /><input id="cd2" class="cde" type="text" value="B" /><input id="cd3" class="cde" type="text" value="C" /><input id="cd4" class="cde" type="text" value="D" /><input id="cd5" class="cde" type="text" value="E" /><input id="cd6" class="cde" type="text" value="F" /><input id="cd7" class="cde" type="text" value="X" />
    <p id="nc1" class="nc">&nbsp;</p>
    <p id="nc2" class="nc">&nbsp;</p>
    <p id="nc3" class="nc">&nbsp;</p>
    <p id="nc4" class="nc">&nbsp;</p>
    <p id="nc5" class="nc">&nbsp;</p>
    <p id="nc6" class="nc">&nbsp;</p>
    </div>

    <style><!--
    .cde{position:absolute; z-index:20; width:2vw; height:2vw; background:none; font-size:2vw; text-align:center; color:white!important; text-shadow:0.1vh 0.1vh black;}
    #cd1{transform:translate(57vw,1vw);}
    #cd2{transform:translate(57vw,4vw);}
    #cd3{transform:translate(57vw,7vw);}
    #cd4{transform:translate(57vw,10vw);}
    #cd5{transform:translate(57vw,13vw);}
    #cd6{transform:translate(57vw,16vw);}
    #cd7{transform:translate(57vw,19vw);}
    .nc{position:absolute;  width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotatey(90deg);transition:transform 1s linear;}
    #nc1{z-index:2;background:url('http://ekladata.com/ieyB79ITQy90YCjUQz0swN58cfE@1536x864.jpg'); background-size:60vw 33.75vw;}
    #nc2{z-index:2;background:url('http://ekladata.com/e_rOjnmxcvkjJAhnIQnifnefm_E@1536x864.jpg'); background-size:60vw 33.75vw;}
    #nc3{z-index:2;background:url('http://ekladata.com/M3pAUdi-1Nkr8_2slqvVkdoH8GI@1536x864.jpg'); background-size:60vw 33.75vw;}
    #nc4{z-index:2;background:url('http://ekladata.com/NRlRDPYYDEpYcB79OGDRyIgjz1A@1536x864.jpg'); background-size:60vw 33.75vw;}
    #nc5{z-index:2;background:url('http://ekladata.com/CGElVIduXs-dK4aVFIESrp9OVZQ@1536x864.jpg'); background-size:60vw 33.75vw;}
    #nc6{z-index:2;background:url('http://ekladata.com/qktfYP55cbmUCEfjr_RAx60xdO4@1536x864.jpg'); background-size:60vw 33.75vw;}
    #cd1:focus ~ #nc1, #cd2:focus ~ #nc2,#cd3:focus ~ #nc3, #cd4:focus ~ #nc4,#cd5:focus ~ #nc5, #cd6:focus ~ #nc6{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotatey(0deg);}
    --></style>

    Mes images sont hébergées en 1920x1080px sur Ekla mais les vôtres peuvent être au format de votre choix mais au ratio 16/9.

    Afin d'alléger le transfert, les adresses Ekla sont du genre: http://ekladata.com/ieyB79ITQy90YCjUQz0swN58cfE.jpg mais, le montage étant en 60vw par 33.75vw, cela correspond sur mon écran à 1536px par 864px et les adresses sont modifiées en http://ekladata.com/ieyB79ITQy90YCjUQz0swN58cfE@1536x864.jpg.

    De façon à ce qu'elles s'adaptent à tout écran, il faut leur donner une dimension adaptative:  background-size:60vw 33.75vw;

    Vous pouvez remplacer mes adresses par les vôtres, avec ou sans @1536x864 ... "c'est vous qui voyez !"