• Montage 116b

    ..


    <div style="position: relative; overflow: hidden; width: 60vw; height: 33.75vw; border: 0.6vh ridge white; margin: 1vh auto; text-align: left;"><input id="tr1" class="tr" type="text" /><input id="tr2" class="tr" type="text" /><input id="tr3" class="tr" type="text" /><input id="tr4" class="tr" type="text" /><input id="tr5" class="tr" type="text" /><input id="tr6" class="tr" type="text" /><input id="tr7" class="tr" type="text" /><input id="tr8" class="tr" type="text" /><input id="tr9" class="tr" type="text" />
    <p id="bc"><img class="mg" src="http://ekladata.com/oysLJyCcKPh2AK6eCysXfckeyuk.jpg" alt="" /><img class="mg" src="http://ekladata.com/2nwyGqAHNFzt_t3L2l-YKHJXc7s.jpg" alt="" /><img class="mg" src="http://ekladata.com/98euORM719sx9g5cwbrSdpgI1LE.jpg" alt="" /><img class="mg" src="http://ekladata.com/DWWqvSLMnCdDAbJEpbikdnLByhg.jpg" alt="" /><img class="mg" src="http://ekladata.com/YS86Uao5hie3Oq9cxXO4ZGZsLCY.jpg" alt="" /><img class="mg" src="http://ekladata.com/Vw2eUcrxI69Ut_vzQtrGdS8wHc0.jpg" alt="" /><img class="mg" src="http://ekladata.com/iS3sFJhlW3T_m1WndoxRzx0DY9U.jpg" alt="" /><img class="mg" src="http://ekladata.com/B9wDcDj1x8TRB8d7rkXAiRPwj_s.jpg" alt="" /><img class="mg" src="http://ekladata.com/8W9zOZx2ft5TWtUd9vHxdCbdWDE.jpg" alt="" /></p>
    </div>

    <style><!--
    .tr{position:absolute; z-index:3; width:2vw; height:2vw; border-radius:50%; border:0.1vh solid black; background:pink; box-shadow:inset 0.4vh 0.4vh 0.6vh black, inset -0.4vh -0.4vh 0.6vh white;}
    #tr1{transform:translate(57vw,2vw);}
    #tr2{transform:translate(57vw,5vw);}
    #tr3{transform:translate(57vw,8vw);}
    #tr4{transform:translate(57vw,11vw);}
    #tr5{transform:translate(57vw,14vw);}
    #tr6{transform:translate(57vw,17vw);}
    #tr7{transform:translate(57vw,20vw);}
    #tr8{transform:translate(57vw,23vw);}
    #tr9{transform:translate(57vw,26vw); background:lime;}
    .tr:focus{background:red;}
    #bc{position:absolute; z-index:1; width:60vw; height:675vw; transition:all 1s linear;}
    .mg{width:60vw; height:33.75vw;}
    #tr1:focus ~ #bc{transform:translate(0vw,-33.75vw);}
    #tr2:focus ~ #bc{transform:translate(0vw,-67.5vw);}
    #tr3:focus ~ #bc{transform:translate(0vw,-101.25vw);}
    #tr4:focus ~ #bc{transform:translate(0vw,-135vw);}
    #tr5:focus ~ #bc{transform:translate(0vw,-168.75vw);}
    #tr6:focus ~ #bc{transform:translate(0vw,-202.5vw);}
    #tr7:focus ~ #bc{transform:translate(0vw,-236.25vw);}
    #tr8:focus ~ #bc{transform:translate(0vw,-270vw);}
    #tr9:focus ~ #bc{transform:translate(0vw,0vw);}
    --></style>


    Dans cette disposition, le contenant fait 1152px (60vw) par 9x33.75vw=675vw.