• Au clic

     

    Clic sur chaque bouton.

     

     

     

     

     

     

     


    <p style="text-align: center;"><span style="background-color: #ffff00;"><strong>Clic sur chaque bouton</strong>.</span></p>
    <div style="width: 80vw; height: 92vh; border: 0.3vh solid white; box-shadow: 0.3vh 0.3vh 0.3vh black; margin: 2vh auto; background: url('http://ekladata.com/ZD75ZZOrK6Ox0uBGKg6gzmNpguA.jpg'); background-size: 100% 100%;"><input id="sh1" class="ssh" type="text" value="1" /> <input id="sh2" class="ssh" type="text" value="2" /> <input id="sh3" class="ssh" type="text" value="3" /> <input id="sh4" class="ssh" type="text" value="4" /> <input id="sh5" class="ssh" type="text" value="5" /> <input id="sh6" class="ssh" type="text" value="6" /> <input id="sh7" class="ssh" type="text" value="7" />
    <p id="shn1">&nbsp;</p>
    <p id="shn2">&nbsp;</p>
    <p id="shn3">&nbsp;</p>
    <p id="shn4">&nbsp;</p>
    <p id="shn5">&nbsp;</p>
    <p id="shn6">&nbsp;</p>
    <p id="shn7">&nbsp;</p>
    </div>

    <style><!--
    .ssh{position:absolute; z-index:10; width:2vw; height:2vw; background:linear-gradient(to bottom, blue 0%, lightblue 100%); border-radius:50%; text-align:center; font-size:3vh;}
    #sh1{ transform:translate(25vw,85vh);}
    #sh2{ transform:translate(30vw,85vh);}
    #sh3{ transform:translate(35vw,85vh);}
    #sh4{ transform:translate(40vw,85vh);}
    #sh5{ transform:translate(45vw,85vh);}
    #sh6{ transform:translate(50vw,85vh);}
    #sh7{ transform:translate(55vw,85vh);}

    #shn1{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/w5tsln72t6oCAi0KycHJCtQUEHk.jpg'); background-size:100% 100%;transform:translate(0vw,0vh) rotatex(90deg); transition:all 1s linear;}
    #shn2{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/gpTS9_w5ztFkDCQ9LiT27ijEfnw.jpg'); background-size:100% 100%;transform:translate(0vw,0vh) rotatex(90deg); transition:all 1s linear;}
    #shn3{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/cpc2x0XuAqkNga9lWsga7rBPHmk.jpg'); background-size:100% 100%;transform:translate(0vw,0vh) rotatex(90deg); transition:all 1s linear;}
    #shn4{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/zRqmFyyypPwSyGie_zIFzFQSn74.jpg'); background-size:100% 100%;transform:translate(0vw,0vh) rotatex(90deg); transition:all 1s linear;}
    #shn5{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/psxqQvx-iHg0qbFMAU7uolCzUtE.jpg'); background-size:100% 100%;transform:translate(0vw,0vh) rotatex(90deg); transition:all 1s linear;}
    #shn6{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/AOYoJDC2EL7RcY-54LnyNqz6Z2U.jpg'); background-size:100% 100%;transform:translate(0vw,0vh) rotatex(90deg); transition:all 1s linear;}
    #shn7{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/GZON19hcayIFfqC7qrGfKHSoxOQ.jpg'); background-size:100% 100%;transform:translate(0vw,0vh) rotatex(90deg); transition:all 1s linear;}
    #sh1:focus ~ #shn1,#sh2:focus ~ #shn2,#sh3:focus ~ #shn3,#sh4:focus ~ #shn4,#sh5:focus ~ #shn5,#sh6:focus ~ #shn6,#sh7:focus ~ #shn7{z-index:2; transform:translate(0vw,0vh) rotatex(0deg);}
    --></style>