• Au clic/Yann

     

               

    Je vois, sur mes différents écrans, que la taille du montage s'adapte; on peut toujours regarder pour changer les valeurs de ce code.


    <div style="margin: 0% 0% 45% 5%;"><input id="c1" type="text" /> <input id="c2" type="text" /> <input id="c3" type="text" /> <input id="c4" type="text" /><input id="c5" type="text" /> <input id="c6" type="text" /> <span id="g1">&nbsp;</span> <span id="g2">&nbsp;</span> <span id="g3">&nbsp;</span> <span id="g4">&nbsp;</span> <span id="g5">&nbsp;</span> <span id="g6">&nbsp;</span></div>
    <p style="text-align: center;"><strong>Vous pouvez peut-&ecirc;tre afficher le code source en s&eacute;lectionnant le montage puis clic droit/code source du montage mais j'ignore si &ccedil;a n'est possible que sous Linux et avec Firefox.</strong></p>
    <style><!--
    #c1{position:absolute; z-index:10; width:5vw; height:5vh; margin:2% 0% 0% 15%;background:url('http://ekladata.com/0b5uML0KXcbBLmGCjEfqYIq3rCY.jpg'); background-size:cover;}
    #c2{position:absolute; z-index:10; width:5vw; height:5vh; margin:2% 0% 0% 23%;background:url('http://ekladata.com/RLD0mZn4JO9VCKtflCz2OhmAzow.jpg'); background-size:cover;}
    #c3{position:absolute; z-index:10; width:5vw; height:5vh; margin:2% 0% 0% 31%;background:url('http://ekladata.com/tJPdPz2bML7PqU-NoOrB2a7EPys.jpg'); background-size:cover;}
    #c4{position:absolute; z-index:10; width:5vw; height:5vh; margin:2% 0% 0% 39%;background:url('http://ekladata.com/jy9JFP-awywYHv-ev6zSzMLTad4.jpg'); background-size:cover;}
    #c5{position:absolute; z-index:10; width:5vw; height:5vh; margin:2% 0% 0% 47%;background:url('http://ekladata.com/hxtk17e0kSlCvIzWP8UDVYCtSTg.jpg'); background-size:cover;}
    #c6{position:absolute; z-index:10; width:5vw; height:5vh; margin:2% 0% 0% 55%;background:url('http://ekladata.com/xMEytumY76fHLW0HRr3rtliockM.jpg'); background-size:cover;}

    #g1{position:absolute; z-index:1; width:80vw; height:80vh; margin:0% 0% 0% 0%; background:url('http://ekladata.com/VVQbz_x3kK90dSaDXn44yJwDkas.jpg'); background-size:cover; transition:all 1s linear;}
    #g2{position:absolute; z-index:2; width:5vw; height:5vh; margin:2% 0% 0% 23%; background:url('http://ekladata.com/BRC1Hab_-4r8D1O6DWWzL1uA-jw.jpg'); background-size:cover; transition:all 1s linear;}
    #g3{position:absolute; z-index:2; width:5vw; height:5vh; margin:2% 0% 0% 31%; background:url('http://ekladata.com/Rd92hD9x6IvCcBxYB2KsoiFEvmI.jpg'); background-size:cover; transition:all 1s linear;}
    #g4{position:absolute; z-index:2; width:5vw; height:5vh; margin:2% 0% 0% 39%; background:url('http://ekladata.com/S5mI946QiIh7ZZ8RwGp25tLunhc.jpg'); background-size:cover; transition:all 1s linear;}
    #g5{position:absolute; z-index:2; width:5vw; height:5vh; margin:2% 0% 0% 47%; background:url('http://ekladata.com/IEJpD7FX8AZFRo8yxh4TIF0-gzQ.jpg'); background-size:cover; transition:all 1s linear;}
    #g6{position:absolute; z-index:2; width:5vw; height:5vh; margin:2% 0% 0% 55%; background:url('http://ekladata.com/GVrlT8IY2YdUT5oZWLtdooJAq0Y.jpg'); background-size:cover; transition:all 1s linear;}

    #c2:focus ~ #g2,#c3:focus ~ #g3,#c4:focus ~ #g4,#c5:focus ~ #g5,#c6:focus ~ #g6{ z-index:5; width:80vw; height:80vh; margin:0% 0% 0% 0%;}
    --></style>