• Rangement 1

    Dans ce montage, une seule image en 800x600px est nécessaire; elle est découpée en morceaux par le code et vous pouvez modifier les positions que j'ai définies, de même que la forme des vignettes.

    J'ai utilisé une image invisible (id="bt1), en 800x600px, placée au dessus du montage, pour servir de bouton au survol; vous pouvez utiliser l'adresse de mon image ou en créer une personnelle.

     

     

     

     

     

     

     

     

     

    <div id="fd">&nbsp;
    <p id="bt1" ><img src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></p>
    <p id="s1" >&nbsp;</p>
    <p id="s2" >&nbsp;</p>
    <p id="s3" >&nbsp;</p>
    <p id="s4" >&nbsp;</p>
    <p id="s5" >&nbsp;</p>
    <p id="s6" >&nbsp;</p>
    <p id="s7" >&nbsp;</p>
    <p id="s8" >&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #fd{position:relative; width:800px; height:600px; margin:10px auto; border:4px ridge white; background:url('http://ekladata.com/Sm1oA1ImUvX8ToJjnJtMyXWzQBs/00004.jpg'); }
    #s1{transition:all 2s linear 0s; position:absolute; transform:translate(600px,200px) rotate(-10deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/oKO2VEbTFNgydje11L0t6XIQOHc/6162.jpg'); background-position:0% 0%;}
    #s2{transition:all 2s linear 0s; position:absolute; transform:translate(300px,100px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/oKO2VEbTFNgydje11L0t6XIQOHc/6162.jpg'); background-position:0% 100%;}
    #s3{transition:all 2s linear 0s;position:absolute; transform:translate(100px,150px) rotate(0deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/oKO2VEbTFNgydje11L0t6XIQOHc/6162.jpg'); background-position:100% 0%;}
    #s4{transition:all 2s linear 0s;position:absolute;transform:translate(100px,50px) rotate(25deg) ; width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/oKO2VEbTFNgydje11L0t6XIQOHc/6162.jpg'); background-position:100% 100%;}
    #s5{transition:all 2s linear 0s; position:absolute; transform:translate(400px,300px) rotate(-40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/oKO2VEbTFNgydje11L0t6XIQOHc/6162.jpg'); background-position:33.3% 0%;}
    #s6{transition:all 2s linear 0s; position:absolute; transform:translate(500px,150px) rotate(20deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/oKO2VEbTFNgydje11L0t6XIQOHc/6162.jpg'); background-position:33.3% 100%;}
    #s7{transition:all 2s linear 0s;position:absolute; transform:translate(100px,300px) rotate(-30deg); width:150px; height:150px;border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/oKO2VEbTFNgydje11L0t6XIQOHc/6162.jpg'); background-position:66.7% 0%;}
    #s8{transition:all 2s linear 0s;position:absolute; transform:translate(450px,70px) rotate(10deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/oKO2VEbTFNgydje11L0t6XIQOHc/6162.jpg'); background-position:66.7% 100%;}

    #bt1{position:absolute; z-index:15; width:800px; height:600px; background-size:cover; transform:translate(0px,0px);}

    #bt1:hover ~ #s1{transform:translate(0px,-27px); width:200px; height:300px;border:0px solid white; box-shadow:0px 0px 0px black;}
    #bt1:hover ~ #s2{transform:translate(0px,273px); width:200px; height:300px; border:0px solid white; box-shadow:0px 0px 0px black;}
    #bt1:hover ~ #s3{transform:translate(600px,-27px); width:200px; height:300px; border:0px solid white; box-shadow:0px 0px 0px black;}
    #bt1:hover ~ #s4{transform:translate(600px,273px); width:200px; height:300px; border:0px solid white; box-shadow:0px 0px 0px black;}
    #bt1:hover ~ #s5{transform:translate(200px,-27px); width:200px; height:300px; border:0px solid white; box-shadow:0px 0px 0px black;}
    #bt1:hover ~ #s6{transform:translate(200px,273px); width:200px; height:300px; border:0px solid white; box-shadow:0px 0px 0px black;}
    #bt1:hover ~ #s7{transform:translate(400px,-27px); width:200px; height:300px; border:0px solid white; box-shadow:0px 0px 0px black;}
    #bt1:hover ~ #s8{transform:translate(400px,273px); width:200px; height:300px; border:0px solid white; box-shadow:0px 0px 0px black;}
    --></style>


    ...
    ...