-
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"> </p>
<p id="nc2" class="nc"> </p>
<p id="nc3" class="nc"> </p>
<p id="nc4" class="nc"> </p>
<p id="nc5" class="nc"> </p>
<p id="nc6" class="nc"> </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 !"