• Montage Loneci

    Cette fidèle visiteuse me propose une idée de variante de mon montage "Aux 4 angles" et en voici une possibilité.

    Clic sur le montage pour ouvrir vignettes
    clic sur chaque vignette pour l'agrandir

    <p style="width: 800px; height: 600px; border: 3px double grey; background: url('http://ekladata.com/WygW5SYDYNOwaXeGbAMWirWb-AA/sh30.png'); margin: 5px auto;"><input id="e1" type="text" /><input id="e2" type="text" /><input id="e3" type="text" /><input id="e4" type="text" /><input id="e5" type="text" /><input id="e6" type="text" value="X" /><span id="e7">Clic sur le montage pour ouvrir vignettes <br /> clic sur chaque vignette pour l'agrandir</span></p>
    <style><!--
    #e1{position:absolute; z-index:5; width:800px; height:600px; border:1px solid black; background:transparent; transform:translate(0px,0px); text-align:center; font-size:30pt;}
    #e2{position:absolute; z-index:2; transition:all 1s linear 0s; transform:translate(400px,300px); width:0px; height:0px; border:1px solid black; background:url(http://ekladata.com/BwDIfGAg4zUYLJQsYdpwB8MHvLk/sh17.png); background-size:cover;}
    #e3{position:absolute; z-index:2; transition:all 1s linear 0s; transform:translate(400px,300px); width:0px; height:0px; border:1px solid black; background:url(http://ekladata.com/fMxdLH7o15fnfRX-FpZ8gXqGgIA/sh19.png); background-size:cover;}
    #e4{position:absolute; z-index:2; transition:all 1s linear 0s; transform:translate(400px,300px); width:0px; height:0px; border:1px solid black; background:url(http://ekladata.com/fO4mZOs_UMGtvICG-yi_jlCMBL0/sh20.png); background-size:cover;}
    #e5{position:absolute; z-index:2; transition:all 1s linear 0s; transform:translate(400px,300px); width:0px; height:0px; border:1px solid black; background:url(http://ekladata.com/xj0XF1Mt-Ox-fkDf2D5OlULTQdQ/sh24.png); background-size:cover;}
    #e6{position:absolute; z-index:20; transform:translate(750px,10px);width:30px; height:30px; font-size:30pt; color:red !important; text-shadow:1px 1px black;background:transparent;}
    #e7{position:absolute; z-index:1; transform:translate(100px,520px); width:600px; height:70px; font-size:20pt; color:white; text-shadow:1px 1px black; text-align:center; background:rgba(0,0,0,0.4);}
    #e1:focus ~ #e2{z-index:10; transform:translate(0px,0px); width:240px; height:180px;}
    #e1:focus ~ #e3{z-index:10; transform:translate(0px,420px); width:240px; height:180px;}
    #e1:focus ~ #e4{z-index:10; transform:translate(560px,0px); width:240px; height:180px;}
    #e1:focus ~ #e5{z-index:10; transform:translate(560px,420px); width:240px; height:180px;}

    #e2:focus, #e3:focus, #e4:focus, #e5:focus{z-index:10;transform:translate(0px,0px);width:800px; height:600px;}
    --></style>
    ...