Diapo 19

Code du montage, avec 4 images en 800x600px.

<div id="fd">
<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>
<p id="comm">Survolez les images pour les redresser.<br />Clic sur les boutons pour les changer.</p>
<p id="tr1"><a href="#lien1"><span style="color: white; text-shadow: 1px 1px black;">1</span></a></p>
<p id="tr2"><a href="#lien2"><span style="color: white; text-shadow: 1px 1px black;">2</span></a></p>
<p id="tr3"><a href="#lien3"><span style="color: white; text-shadow: 1px 1px black;">3</span></a></p>
<p id="tr4"><a href="#lien4"><span style="color: white; text-shadow: 1px 1px black;">4</span></a></p>
<p id="ig1">&nbsp;</p>
<p id="ig2">&nbsp;</p>
<p id="ig3">&nbsp;</p>
<p id="ig4">&nbsp;</p>
</div>
</div>

<style><!--
#ancres a.ancre{display: none;}
#fd{position:relative; width:800px; height:600px; margin: 10px auto; border:4px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/uQBWPG8OhzSLjNB1Qo4XRtz-lgE/bk441.jpg');}
#comm{ position:absolute; z-index:1; transform:translate(100px,20px); width:600px; text-align:center; font-size:20pt;}
#tr1{position:absolute;z-index:1;transform:translate(770px,20px); font-size:25pt;}
#tr2{position:absolute;z-index:1;transform:translate(770px,70px); font-size:25pt;}
#tr3{position:absolute;z-index:1;transform:translate(770px,120px); font-size:25pt;}
#tr4{position:absolute;z-index:1;transform:translate(770px,170px); font-size:25pt;}
#ig1{position:absolute; z-index:2; width:400px; height:300px; transition:all 1s linear; border:4px solid white; box-shadow:3px 3px 6px black; opacity:1;
transform:translate(210px,100px) scale3d(1.2,1.2,1) perspective(400px) rotatex(60deg);
background:url('http://ekladata.com/olLibYOxils0skx3BFZovxgZvgk/DSCN5976f.jpg');background-size:cover;}
#ig2{position:absolute; z-index:1; width:400px; height:300px; transition:all 1s linear; border:4px solid white; box-shadow:3px 3px 6px black; opacity:0;
transform:translate(212px,102px) scale3d(1.2,1.2,1) perspective(400px) rotatex(60deg);
background:url('http://ekladata.com/sDnqAS-7_rYtB3sMOkZuZRdpsZY/DSCN5977f.jpg');background-size:cover;}
#ig3{position:absolute; z-index:1; width:400px; height:300px; transition:all 1s linear; border:4px solid white; box-shadow:3px 3px 6px black; opacity:0;
transform:translate(212px,102px) scale3d(1.2,1.2,1) perspective(400px) rotatex(60deg);
background:url('http://ekladata.com/peXcn6x9Wtl5XQslJfGcofrSxPk/DSCN6017f.jpg');background-size:cover;}
#ig4{position:absolute; z-index:1; width:400px; height:300px; transition:all 1s linear; border:4px solid white; box-shadow:3px 3px 6px black; opacity:0;
transform:translate(212px,102px) scale3d(1.2,1.2,1) perspective(400px) rotatex(60deg);
background:url('http://ekladata.com/90o03uUiLVbmElZ8zu8J8b3BRxs/DSCN6025.jpg');background-size:cover;}
#ig1:hover{width:800px; height:600px;transform:translate(-4px,-4px) scale3d(1,1,1) perspective(4000px) rotatex(0deg);}
#ig2:hover{width:800px; height:600px;transform:translate(-4px,-4px) scale3d(1,1,1) perspective(4000px) rotatex(0deg);}
#ig3:hover{width:800px; height:600px;transform:translate(-4px,-4px) scale3d(1,1,1) perspective(4000px) rotatex(0deg);}
#ig4:hover{width:800px; height:600px;transform:translate(-4px,-4px) scale3d(1,1,1) perspective(4000px) rotatex(0deg);}
#ancres a#lien1:target ~ #ig1{opacity:1; z-index:5;  box-shadow:0px 0px 0px;}
#ancres a#lien2:target ~ #ig2{opacity:1; z-index:5;  box-shadow:0px 0px 0px;}
#ancres a#lien3:target ~ #ig3{opacity:1; z-index:5;  box-shadow:0px 0px 0px;}
#ancres a#lien4:target ~ #ig4{opacity:1; z-index:5;  box-shadow:0px 0px 0px;}
--></style>
...
Si vous voulez placer vos adresses d'images à la place des miennes, remplacez mes adresses en rouge par les vôtres.
...