• Montage 35

    Voici le code de l'article publié sous le titre "Fenêtre", en 60vw(60% de la largeur de votre écran).

    Clic maintenu sur chaque "carreau" des fenêtres.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    Le code va vous paraître bien long mais c'est en raison du nombre d'images (12) et donc du nombre de zones de commandes (12), qui sont chacune à positionner de façon individuelle.

    Remplacez mes adresses d'images par les vôtres, au ratio 16/9 en horizontal, pour ne pas les déformer; elles seront dimensionnées par le code.

    Par rapport à l'article publié, j'ai ajouté le passage du noir et blanc à la couleur.


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh solid #181907; background: url('http://ekladata.com/Youhx1k0AWaazORuulepKtLCps0.jpg'); background-size: cover;">
    <p id="z1" class="zone">&nbsp;</p>
    <p id="z2" class="zone">&nbsp;</p>
    <p id="z3" class="zone">&nbsp;</p>
    <p id="z4" class="zone">&nbsp;</p>
    <p id="z5" class="zone">&nbsp;</p>
    <p id="z6" class="zone">&nbsp;</p>
    <p id="z7" class="zone">&nbsp;</p>
    <p id="z8" class="zone">&nbsp;</p>
    <p id="z9" class="zone">&nbsp;</p>
    <p id="z10" class="zone">&nbsp;</p>
    <p id="z11" class="zone">&nbsp;</p>
    <p id="z12" class="zone">&nbsp;</p>
    <p id="mg1" class="image">&nbsp;</p>
    <p id="mg2" class="image">&nbsp;</p>
    <p id="mg3" class="image">&nbsp;</p>
    <p id="mg4" class="image">&nbsp;</p>
    <p id="mg5" class="image">&nbsp;</p>
    <p id="mg6" class="image">&nbsp;</p>
    <p id="mg7" class="image">&nbsp;</p>
    <p id="mg8" class="image">&nbsp;</p>
    <p id="mg9" class="image">&nbsp;</p>
    <p id="mg10" class="image">&nbsp;</p>
    <p id="mg11" class="image">&nbsp;</p>
    <p id="mg12" class="image">&nbsp;</p>
    </div>

    <style><!--
    .zone{position:absolute;z-index:5; width:15vw; height:11.25vw; border:0.4vh solid #181907;}
    #z1{box-sizing:border-box; transform:translate(0vw,0vw);}
    #z2{box-sizing:border-box; transform:translate(15vw,0vw);}
    #z3{box-sizing:border-box; transform:translate(30vw,0vw);}
    #z4{box-sizing:border-box; transform:translate(45vw,0vw);}
    #z5{box-sizing:border-box; transform:translate(0vw,11.25vw);}
    #z6{box-sizing:border-box; transform:translate(15vw,11.25vw);}
    #z7{box-sizing:border-box; transform:translate(30vw,11.25vw);}
    #z8{box-sizing:border-box; transform:translate(45vw,11.25vw);}
    #z9{box-sizing:border-box; transform:translate(0vw,22.50vw);}
    #z10{box-sizing:border-box; transform:translate(15vw,22.50vw);}
    #z11{box-sizing:border-box; transform:translate(30vw,22.50vw);}
    #z12{box-sizing:border-box; transform:translate(45vw,22.50vw);}
    .image{position:absolute; z-index:1; width:15vw; height:11.25vw;opacity:0; filter:grayscale(1); -webkit-filter:grayscale(1);transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s,opacity 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
    #mg1{transform:translate(0vw,0vw); background:url('http://ekladata.com/a8tjvzRxfFVCZEnGYCJMv-njNZs.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw;}
    #mg2{transform:translate(15vw,0vw); background:url('http://ekladata.com/NJlwtF_M_uGgRAc--GIzzp6r-7c.jpg'); background-size:60vw 33.75vw; background-position:-15vw 0vw;}
    #mg3{transform:translate(30vw,0vw); background:url('http://ekladata.com/_BHLRCYTIPuPXrmAmKwaLwoCNXk.jpg'); background-size:60vw 33.75vw; background-position:-30vw 0vw;}
    #mg4{transform:translate(45vw,0vw); background:url('http://ekladata.com/gZiXjpUEakZzPbaPszqX1D4utPc.jpg'); background-size:60vw 33.75vw; background-position:-45vw 0vw;}
    #mg5{transform:translate(0vw,11.25vw); background:url('http://ekladata.com/DGQuje9phQcilWIJdF4yitT3wog.jpg'); background-size:60vw 33.75vw; background-position:0vw -11.25vw;}
    #mg6{transform:translate(15vw,11.25vw); background:url('http://ekladata.com/ToA07Nm86g5vvecroTFi5aZvaZc.jpg'); background-size:60vw 33.75vw; background-position:-15vw -11.25vw;}
    #mg7{transform:translate(30vw,11.25vw); background:url('http://ekladata.com/lQF_RLDfD4fnoAvDg0gwdxibceU.jpg'); background-size:60vw 33.75vw; background-position:-30vw -11.25vw;}
    #mg8{transform:translate(45vw,11.25vw); background:url('http://ekladata.com/Qqyg8z4hfk23Yy4TfqmLUuK8gsA.jpg'); background-size:60vw 33.75vw; background-position:-45vw -11.25vw;}
    #mg9{transform:translate(0vw,22.5vw); background:url('http://ekladata.com/hOsbBaClwSGE8pUl3nLTTtLi7u8.jpg'); background-size:60vw 33.75vw; background-position:0vw -22.5vw;}
    #mg10{transform:translate(15vw,22.5vw); background:url('http://ekladata.com/6BMcmyS1eIx-yhrM8MH4l6lrByw.jpg'); background-size:60vw 33.75vw; background-position:-15vw -22.5vw;}
    #mg11{transform:translate(30vw,22.5vw); background:url('http://ekladata.com/O3atw-BXUFvbdVik5N1EEYISfkw.jpg'); background-size:60vw 33.75vw; background-position:-30vw -22.5vw;}
    #mg12{transform:translate(45vw,22.5vw); background:url('http://ekladata.com/ClWfGcExBdejGI2nDfBX1kbfSUw.jpg'); background-size:60vw 33.75vw; background-position:-45vw -22.5vw;}

    #z1:active ~ #mg1,#z2:active ~ #mg2,#z3:active ~ #mg3,#z4:active ~ #mg4,#z5:active ~ #mg5,#z6:active ~ #mg6,#z7:active ~ #mg7,#z8:active ~ #mg8,#z9:active ~ #mg9,#z10:active ~ #mg10,#z11:active ~ #mg11,#z12:active ~ #mg12{z-index:10; opacity:1; width:60vw; height:33.75vw; filter:grayscale(0); webkit-filter:grayscale(0);background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>