• Plein écran 5

    Pour bien montrer que ces codes ne sont pas bien compliqués, voici celui d'un article publié.

    Clic sur l'image agrandie pour revenir à l'article avec, de préférence, l'affichage de votre écran en plein article.



    <div style="width: 60vw; height: 10vw; margin: 1vh auto; text-align: left;"><input id="clc1" class="clc" type="text" value="Clic 1" /> <input id="clc2" class="clc" type="text" value="Clic 2" /> <input id="clc3" class="clc" type="text" value="Clic 3" /> <input id="clc4" class="clc" type="text" value="Clic 4" /> <input id="clc5" class="clc" type="text" value="Clic 5" /> <input id="clc6" class="clc" type="text" value="Clic 6" /> <input id="clc7" class="clc" type="text" value="Clic 7" /> <img id="mig1" class="mig" src="http://ekladata.com/BFzBGM8WdQPEoMtsGAY7wYl8A6k.jpg" alt="" /> <img id="mig2" class="mig" src="http://ekladata.com/gX45SvI_suCpRPULq-4Z81Evv60.jpg" alt="" /> <img id="mig3" class="mig" src="http://ekladata.com/BXDUDgarehAErAiR2nXNFDYwSxM.jpg" alt="" /> <img id="mig4" class="mig" src="http://ekladata.com/M_ifEgPMA8_Wz9soVqWRVMlHxOE.jpg" alt="" /> <img id="mig5" class="mig" src="http://ekladata.com/r10X7vqDr5jT4-sqs4kBLegvivA.jpg" alt="" /> <img id="mig6" class="mig" src="http://ekladata.com/Rg23zqkcJwjGsn8ymX2bxCgOiYg.jpg" alt="" /> <img id="mig7" class="mig" src="http://ekladata.com/5TSWMSI8qw3eCRaEITdcVB8cQp0.jpg" alt="" /></div>
    <style><!--
    .clc{position:absolute; z-index:1; width:6vw; height:2.5vw; border-radius:1.25vw; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; text-align:center; line-height:2.5vw; font-size:1.5vw; color:white!important; text-shadow:0.1vh 0.1vh black; border:0.3vh ridge grey; background:coral;}
    #clc1{transform:translate(0vw,0vw);}
    #clc2{transform:translate(8vw,0vw);}
    #clc3{transform:translate(16vw,0vw);}
    #clc4{transform:translate(24vw,0vw);}
    #clc5{transform:translate(32vw,0vw);}
    #clc6{transform:translate(40vw,0vw);}
    #clc7{transform:translate(48vw,0vw);}
    .clc:hover{background:lime;}
    .mig{position:absolute; z-index:100; width:0vw; height:0vw; left:50vw; top:28vw; transition:all 1s linear;}
    #clc1:focus ~ #mig1,#clc2:focus ~ #mig2,#clc3:focus ~ #mig3,#clc4:focus ~ #mig4,#clc5:focus ~ #mig5,#clc6:focus ~ #mig6,#clc7:focus ~ #mig7{width:100vw; height:56.25vw; top:0vw; left:0vw;}
    --></style>


    Le montage est en 60% de la largeur de votre écran.

    7 boutons au clic (input) commandent 7 images, hébergées en grandes dimensions et dont mes adresses sont en rouge: les remplacer par les vôtres.