Diapo 2 dé en 800x600px.9 images

Code du montage:

<div style="width: 800px; height: 600px; border: 4px ridge white; position: relative; overflow: hidden; margin: 10px auto;">
<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> <a id="lien7" class="ancre"></a> <a id="lien8" class="ancre"></a> <a id="lien9" class="ancre"></a>
<p id="d">&nbsp;</p>
<p id="bt1"><a href="#lien1"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
<p id="bt2"><a href="#lien2"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
<p id="bt3"><a href="#lien3"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
<p id="bt4"><a href="#lien4"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
<p id="bt5"><a href="#lien5"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
<p id="bt6"><a href="#lien6"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
<p id="bt7"><a href="#lien7"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
<p id="bt8"><a href="#lien8"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
<p id="bt9"><a href="#lien9"><img src="http://ekladata.com/AFI4Lj1HG4md5GWPQjlQY2j804U/bouton-022.gif" alt="" /></a></p>
<p id="im1"><img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/ZyB_T9zRyALVfvSolnlL1TqdXbo/5647.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/jsCep_xHieQAG7_1MxvzH3IgOOU/5648.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/o_L3yRBPH7DCidqLxwBaiS_tUjM/5649.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left; clear: left;" src="http://ekladata.com/qrUA5xf9EFPFnk1KTsejkf9fKEQ/5650.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/VjITtLr0_vaoSMFu_GgKVRSbFSE/5651.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/0ssLVRJtbMmXp3LbVcAaqUSGuDo/5652.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left; clear: left;" src="http://ekladata.com/0cvMoTc6t_4b_8R9ScGKndN0Spw/5653.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/pd04ffgTsrzuCaXTaXcDpnSBVZM/5654.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/vA7bya-eaaKl4fz99pgvIyiN_lo/5655.jpg" alt="" /></p>
</div>
</div>

<style><!--
#ancres a.ancre{display: none;}
#d{position:absolute; z-index:2; transform:translate(700px,0px); width: 100px; height: 105px; border: 1px solid black; border-radius:10px; background-color: rgba(255,255,255,0.5);}
#bt1{position:absolute;z-index:3; transform:translate(710px,5px);}
#bt2{position:absolute;z-index:3; transform:translate(740px,5px);}
#bt3{position:absolute;z-index:3; transform:translate(770px,5px);}
#bt4{position:absolute;z-index:3; transform:translate(710px,40px);}
#bt5{position:absolute;z-index:3; transform:translate(740px,40px);}
#bt6{position:absolute;z-index:3; transform:translate(770px,40px);}
#bt7{position:absolute;z-index:3; transform:translate(710px,75px);}
#bt8{position:absolute;z-index:3; transform:translate(740px,75px);}
#bt9{position:absolute;z-index:3; transform:translate(770px,75px);}
#im1{position:absolute;z-index:1; transform:translate(0px,0px); transition:all 1s linear; width:2400px; height:1800px;}

#ancres a#lien1:target ~ #im1{transform:translate(0px,0px);}
#ancres a#lien2:target ~ #im1{transform:translate(-800px,0px);}
#ancres a#lien3:target ~ #im1{transform:translate(-1600px,0px);}
#ancres a#lien4:target ~ #im1{transform:translate(0px,-600px);}
#ancres a#lien5:target ~ #im1{transform:translate(-800px,-600px);}
#ancres a#lien6:target ~ #im1{transform:translate(-1600px,-600px);}
#ancres a#lien7:target ~ #im1{transform:translate(0px,-1200px);}
#ancres a#lien8:target ~ #im1{transform:translate(-800px,-1200px);}
#ancres a#lien9:target ~ #im1{transform:translate(-1600px,-1200px);}
--></style>
...
Le cadre du dé (#d) est positionné à droite et les boutons sont positionnés individuellement dessus.
Le cadre des images (#im1) comporte les 9 images, rangées par lignes de 3.
Le clic sur chaque bouton va animer l'image correspondante, en la déplaçant en haut/gauche.
...