• Zoom2 henri

    Voici une de mes photos, hébergées en 1920x1080px, publiée en unité adaptative de 80% des dimensions de l'écran de lecture: width:80vw; height:45vw;.

    Cette image est divisée en 8 parties de 20vw par 22.5vw, par 8 zones de sélection, placées au dessus, à survoler.

    Chaque partie copiera la partie qu'elle sélectionne dans l'écran, sans bordure, selon les choix de Henri.

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 50vw; height: 30vw; margin: 2vh auto;">
    <p id="sel1" class="sel">&nbsp;</p>
    <p id="sel2" class="sel">&nbsp;</p>
    <p id="sel3" class="sel">&nbsp;</p>
    <p id="sel4" class="sel">&nbsp;</p>
    <p id="sel5" class="sel">&nbsp;</p>
    <p id="sel6" class="sel">&nbsp;</p>
    <p id="sel7" class="sel">&nbsp;</p>
    <p id="sel8" class="sel">&nbsp;</p>
    <p id="mod1" class="md1">&nbsp;</p>
    <p id="ecran">&nbsp;</p>
    </div>

    <style><!--
    .sel{position:absolute; z-index:2; box-sizing:border-box; border:0.2vh dashed white; width:4vw; height:4.5vw;}
    #sel1{transform:translate(34vw,0vw);}
    #sel2{transform:translate(38vw,0vw);}
    #sel3{transform:translate(42vw,0vw);}
    #sel4{transform:translate(46vw,0vw);}
    #sel5{transform:translate(34vw,4.5vw);}
    #sel6{transform:translate(38vw,4.5vw);}
    #sel7{transform:translate(42vw,4.5vw);}
    #sel8{transform:translate(46vw,4.5vw);}
    .md1{background:url('http://ekladata.com/Jqwvhj6H_zDMGeFOTxRoTfmixf0.jpg'); background-size:16vw 9vw;}
    #mod1{position:absolute; z-index:1; width:16vw; height:9vw; transform:translate(34vw,0vw);}
    #ecran{position:absolute; z-index:1; width:20vw; height:22.5vw; transform:translate(0vw,0vw);}
    #sel1:hover ~ #ecran{background:url('http://ekladata.com/Jqwvhj6H_zDMGeFOTxRoTfmixf0.jpg'); background-position:0vw 0vw; background-size:80vw 45vw;}
    #sel2:hover ~ #ecran{background:url('http://ekladata.com/Jqwvhj6H_zDMGeFOTxRoTfmixf0.jpg'); background-position:-20vw 0vw; background-size:80vw 45vw;}
    #sel3:hover ~ #ecran{background:url('http://ekladata.com/Jqwvhj6H_zDMGeFOTxRoTfmixf0.jpg'); background-position:-40vw 0vw; background-size:80vw 45vw;}
    #sel4:hover ~ #ecran{background:url('http://ekladata.com/Jqwvhj6H_zDMGeFOTxRoTfmixf0.jpg'); background-position:-60vw 0vw; background-size:80vw 45vw;}
    #sel5:hover ~ #ecran{background:url('http://ekladata.com/Jqwvhj6H_zDMGeFOTxRoTfmixf0.jpg'); background-position:0vw -22.5vw; background-size:80vw 45vw;}
    #sel6:hover ~ #ecran{background:url('http://ekladata.com/Jqwvhj6H_zDMGeFOTxRoTfmixf0.jpg'); background-position:-20vw -22.5vw; background-size:80vw 45vw;}
    #sel7:hover ~ #ecran{background:url('http://ekladata.com/Jqwvhj6H_zDMGeFOTxRoTfmixf0.jpg'); background-position:-40vw -22.5vw; background-size:80vw 45vw;}
    #sel8:hover ~ #ecran{background:url('http://ekladata.com/Jqwvhj6H_zDMGeFOTxRoTfmixf0.jpg'); background-position:-60vw -22.5vw; background-size:80vw 45vw;}
    --></style>

    L'image en référence mesure 80vw par 45vw, chacune des 8 sélections, avec une bordure en pointillés pour les visualiser.

    La vignette comportant les sélections mesure: 16vw par 9vw et  est découpée en 8 parties de 4vw par 4.5vw, par les sélections.

    Chaque sélection est placée au dessus d'une partie différente de l'image et la copie dans l'écran, aux dimensions de 80/4=20vw et 45vw∕2=22.5vw.