• Plein écran 2

     Comme évoqué dans la page précédente, selon la structure de votre page vous devrez adapter le montage Plein Ecran en fonction des menus latéraux installés et de leur largeur.

    La référence dans notre écriture est le bord gauche de la page; si le bord gauche est le bord de votre zone article, comme pour moi, pas de souci car l'agrandissement de l'image va recouvrir tout l'écran, en partant de cette référence.

    Par contre, si vous avez installé un menu latéral à gauche, votre zone article et donc son bord gauche de référence se trouve décalé de la largeur de ce menu gauche, dont vous trouvez la largeur en pixels, dans l'onglet Apparence/modifier le thème/Menu/format.

    Voici un exemple de structure de page:

    Menu latéral gauche.
    Menu latéral droit.

    La partie en rose représente votre page avec les menus gauche (bleu) et droit (jaune) et la zone article (blanc).

    Les menus font 10vw de large et la zone article 60vw; nous reviendrons sur comment transcrire les pixels en vw.

    Nous voyons que si l'image s'agrandit en prenant en référence le bord gauche de la zone article, elle ne recouvrera pas le menu latéral gauche; il faudra donc lui dire de s'agrandir en se déplaçant de -10vw vers la gauche.

    Exemple au clic maintenu mais le survol convient également.

    <div style="width: 80.6vw; height: 12vw; background: pink; margin: 1vh auto; border: 0.2vh solid red; text-align: center;">
    <div style="width: 10vw; height: 10vw; float: left; background: aqua; border: 0.1vh solid black; text-align: center; line-height: 3vw; font-size: 2vw;">Menu lat&eacute;ral gauche.</div>
    <div style="width: 60vw; height: 7vw; float: left; text-align: left; border: 0.1vh solid black; background: white;"><img id="cor1" class="cor" src="http://ekladata.com/EH1shH43dvnRzWR0sG04OlcLqvQ.jpg" alt="" /> <img id="cor2" class="cor" src="http://ekladata.com/BmTAXGs08ysAV8BkQ1iyxczhRwo.jpg" alt="" /> <img id="cor3" class="cor" src="http://ekladata.com/7mPD8a983cwavI587RHaLFkj34s.jpg" alt="" /> <img id="cor4" class="cor" src="http://ekladata.com/kE431rc6YyvYpthAobuUCHtCAP4.jpg" alt="" /> <img id="cor5" class="cor" src="http://ekladata.com/9YHZTsUkoYhTl3n3YMpLbe9SWjI.jpg" alt="" /> <img id="cor6" class="cor" src="http://ekladata.com/HGrAOw6PBq1B4yA2QJOg3zjFhBU.jpg" alt="" /></div>
    <div style="width: 10vw; height: 10vw; float: left; background: #FAEBD7; border: 0.1vh solid black; text-align: center; line-height: 3vw; font-size: 2vw;">Menu lat&eacute;ral droit.</div>
    </div>

    <style><!--
    .cor{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.5vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
    #cor1{transform:translate(0.5vw,0.5vw);}
    #cor2{transform:translate(10.5vw,0.5vw);}
    #cor3{transform:translate(20.5vw,0.5vw);}
    #cor4{transform:translate(30.5vw,0.5vw);}
    #cor5{transform:translate(40.5vw,0.5vw);}
    #cor6{transform:translate(50.5vw,0.5vw);}
    #cor1:active,#cor2:active,#cor3:active,#cor4:active,#cor5:active,#cor6:active{z-index:5; width:80vw; height:80vh;transform:translate(-10vw,0vw);}
    --></style>

    A vous de déterminer les valeurs pour votre page.

    Rapport Pixel/VW; le VW est un % de la largeur de votre page; si votre écran a une largeur de 1920px et que votre menu mesure 150px, le rapport est de 1920/150=12.8 soit, en % 100/12.8=7.8125% soit 7.8125vw.