-
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"> </p>
<p id="img2"> </p>
<p id="img3"> </p>
<p id="img4"> </p>
<p id="img5"> </p>
<p id="img6"> </p>
<p id="cg"> </p>
<p id="cd"> </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>