• Montage 263

     6 images au ratio 16/9; survolez chaque moitié pour la compléter; clic sur chaque bouton pour changer les images.

    Exemple en 80% de la largeur de l'écran de lecture, code en 900px par 506px.

     

     

     

     

    <div style="width: 900px; height: 506px; margin: 5px auto; border: 3px ridge grey; text-align: left;"><input id="chg1" class="chg" type="text" /><input id="chg2" class="chg" type="text" />

    <p id="bis1">&nbsp;</p>

    <p id="bis2">&nbsp;</p>

    <p id="bis3">&nbsp;</p>

    <p id="bis4">&nbsp;</p>

    </div>

    <style><!--

    .chg{position:absolute; z-index:10; width:20px; height:10px; border-radius:0 0 5px 5px;}

    #chg1{transform:translate(400px,0px); background:lime;}

    #chg2{transform:translate(500px,0px); background:lime;}

    #bis1{position:absolute; z-index:1; width:450px; height:506px; background:url('http://ekladata.com/YA-8_0-8RDb657DI9tqEK4_oSuY.jpg'); background-size:900px 506px; background-position:0px 0px; transform:translate(0px,0px);}

    #bis2{position:absolute; z-index:1; width:450px; height:506px; background:url('http://ekladata.com/YA-8_0-8RDb657DI9tqEK4_oSuY.jpg'); background-size:900px 506px; background-position:-450px 0px; transform-origin:left center; transform:translate(450px,0px) rotatey(90deg); transition:all 1s linear;}

    #bis1:hover ~ #bis2{z-index:5; transform:translate(450px,0px) rotatey(0deg);}

    #bis3{position:absolute; z-index:1; width:450px; height:506px; background:url('http://ekladata.com/YqICC0gvjj6tTge47AoQLufv-4Q.jpg'); background-size:900px 506px; background-position:-450px 0px; transform:translate(450px,0px);}

    #bis4{position:absolute; z-index:1; width:450px; height:506px; transform-origin:right center;  background:url('http://ekladata.com/YqICC0gvjj6tTge47AoQLufv-4Q.jpg'); background-size:900px 506px; background-position:0px 0px;  transform:translate(0px,0px) rotatey(90deg); transition:all 1s linear;}

    #bis3:hover ~ #bis4{z-index:5; transform:translate(0px,0px) rotatey(0deg);}

    #chg1:focus,#chg2:focus{background:coral;}

    #chg1:focus ~ #bis1{background:url('http://ekladata.com/8OtliOZMgElybcgp-KGo9JFayns.jpg'); background-size:900px 506px; background-position:0px 0px;}

    #chg1:focus ~ #bis2{background:url('http://ekladata.com/8OtliOZMgElybcgp-KGo9JFayns.jpg'); background-size:900px 506px; background-position:-450px 0px;}

    #chg1:focus ~ #bis3{background:url('http://ekladata.com/n2QHeC4PxELucH9yCZBAbwNvqcQ.jpg'); background-size:900px 506px; background-position:-450px 0px;}

    #chg1:focus ~ #bis4{background:url('http://ekladata.com/n2QHeC4PxELucH9yCZBAbwNvqcQ.jpg'); background-size:900px 506px; background-position:0px 0px;}

    #chg2:focus ~ #bis1{background:url('http://ekladata.com/eD18HeWqdav-RlSQbi3q_zXB5Ns.jpg'); background-size:900px 506px; background-position:0px 0px;}

    #chg2:focus ~ #bis2{background:url('http://ekladata.com/eD18HeWqdav-RlSQbi3q_zXB5Ns.jpg'); background-size:900px 506px; background-position:-450px 0px;}

    #chg2:focus ~ #bis3{background:url('http://ekladata.com/iCR6Pi8doV-UwSgHaWgpsmD5-c0.jpg'); background-size:900px 506px; background-position:-450px 0px;}

    #chg2:focus ~ #bis4{background:url('http://ekladata.com/iCR6Pi8doV-UwSgHaWgpsmD5-c0.jpg'); background-size:900px 506px; background-position:0px 0px;}

    --></style>