• Montage 6 photos 450x600px

    J'ai souvent du mal à publier mes photos en 450x600px car je les trouve un peu petites, par rapport à celles en 800x600px.

    Voici un montage imaginé: clic sur les vignettes et retour en position de départ par un clic sur le bouton rouge.

     

     

     

     

     

     

     

     


    <div id="mont">
    <div id="ancres"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a> <a id="lien3" class="ancre"></a> <a id="lien4" class="ancre"></a> <a id="lien5" class="ancre"></a> <a id="lien6" class="ancre"></a>
    <p id="tr0"><a href="#lien"><img src="http://ekladata.com/5vYRXqnn3UosWx7Y0xF1eIgstfw/btrec1.png" alt="" /></a></p>
    <p id="tr1"><a href="#lien1"><img style="width: 60px; height: 45px; border: 2px solid white;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></p>
    <p id="tr2"><a href="#lien2"><img style="width: 60px; height: 45px; border: 2px solid white;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></p>
    <p id="tr3"><a href="#lien3"><img style="width: 60px; height: 45px; border: 2px solid white;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></p>
    <p id="tr4"><a href="#lien4"><img style="width: 60px; height: 45px; border: 2px solid white;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></p>
    <p id="tr5"><a href="#lien5"><img style="width: 60px; height: 45px; border: 2px solid white;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></p>
    <p id="tr6"><a href="#lien6"><img style="width: 60px; height: 45px; border: 2px solid white;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></p>
    <p id="img1">&nbsp;</p>
    <p id="img2">&nbsp;</p>
    <p id="img3">&nbsp;</p>
    <p id="img4">&nbsp;</p>
    <p id="img5">&nbsp;</p>
    <p id="img6">&nbsp;</p>
    <p id="cg">&nbsp;</p>
    <p id="cd">&nbsp;</p>
    </div>
    </div>
    <style type="text/css"><!--
    #mont{position:relative; width:1000px; height:600px;margin:10px auto;}
    #ancres a.ancre{display: none;}
    #tr0{transform:translate(480px,10px);position:absolute;z-index:15;}
    #tr1{position:absolute;z-index:10;transform:translate(470px,60px);}
    #tr2{position:absolute;z-index:10;transform:translate(470px,120px);}
    #tr3{position:absolute;z-index:10;transform:translate(470px,180px);}
    #tr4{position:absolute;z-index:10;transform:translate(470px,240px);}
    #tr5{position:absolute;z-index:10;transform:translate(470px,300px);}
    #tr6{position:absolute;z-index:10;transform:translate(470px,360px);}


    #img1{position:absolute;z-index:2;width:45px;height:60px;transform:translate(480px,56px) rotate(90deg); background:url('http://ekladata.com/aACIh0cVSpu6qGKfFUflc3AiUW8/6242.jpg'); background-size:cover;transition: all 2s ease;}
    #img2{position:absolute;z-index:2;width:45px;height:60px;transform:translate(480px,116px) rotate(90deg); background:url('http://ekladata.com/6tg1mu6PltWRY04OsXDnowtqktY/6256.jpg'); background-size:cover;transition: all 2s ease;}
    #img3{position:absolute;z-index:2;width:45px;height:60px;transform:translate(480px,176px) rotate(90deg); background:url('http://ekladata.com/hX7AIMBNuu1tE8M9lzalsmkKQEo/6300.jpg'); background-size:cover;transition: all 2s ease;}
    #img4{position:absolute;z-index:2;width:45px;height:60px;transform:translate(480px,236px) rotate(90deg); background:url('http://ekladata.com/c0cxD5PmABSyPJQi0oHRutT-jTo/6310.jpg'); background-size:cover;transition: all 2s ease;}
    #img5{position:absolute;z-index:2;width:45px;height:60px;transform:translate(480px,296px) rotate(90deg); background:url('http://ekladata.com/yyvk1zZFjynbBqoIh1duV9UZGpk/6328.jpg'); background-size:cover;transition: all 2s ease;}
    #img6{position:absolute;z-index:2;width:45px;height:60px;transform:translate(480px,356px) rotate(90deg); background:url('http://ekladata.com/HGZXCjwvmTt0GTxYhllP5E3Sjtc/6506.jpg'); background-size:cover;transition: all 2s ease;}

     


    #cg{position:absolute; transform:translate(0px,0px); width:450px; height:600px; border:4px ridge white; background:url('http://ekladata.com/yIl5r0XX7Pls2DeJZCAXp7JRngQ/brown95.jpg'); background-size:cover;}
    #cd{position:absolute; transform:translate(550px,0px); width:450px; height:600px; border:4px ridge white; background:url('http://ekladata.com/yIl5r0XX7Pls2DeJZCAXp7JRngQ/brown95.jpg'); background-size:cover;}

    #ancres a#lien1:target ~ #img1{width:450px; height:600px; transform:translate(4px,4px) rotate(0deg); }
    #ancres a#lien2:target ~ #img2{width:450px; height:600px; transform:translate(554px,4px) rotate(0deg); }
    #ancres a#lien3:target ~ #img3{width:450px; height:600px; transform:translate(4px,4px) rotate(0deg); }
    #ancres a#lien4:target ~ #img4{width:450px; height:600px; transform:translate(554px,4px) rotate(0deg); }
    #ancres a#lien5:target ~ #img5{width:450px; height:600px; transform:translate(4px,4px) rotate(0deg); }
    #ancres a#lien6:target ~ #img6{width:450px; height:600px; transform:translate(554px,4px) rotate(0deg); }
    --></style>