Eki Eder

1+5 images au ratio 4/3 (800x600px). On peut ajouter ou retirer des couples bouton/image selon convenance. 

Remplacer mes adresses images en bleu par les vôtres.

<div style="width: 800px; height: 600px; margin: 5px auto; border: 1px solid black; background: url('http://ekladata.com/QDFKiN0ZAq-W02gN9dkNbb8W34o.jpg'); background-size: 800px 600px;">
<p id="os0">Clic maintenu sur chaque bouton.</p>
<p id="os1" class="os">&nbsp;</p>
<p id="os2" class="os">&nbsp;</p>
<p id="os3" class="os">&nbsp;</p>
<p id="os4" class="os">&nbsp;</p>
<p id="os5" class="os">&nbsp;</p>
<p id="ois1" class="ois">&nbsp;</p>
<p id="ois2" class="ois">&nbsp;</p>
<p id="ois3" class="ois">&nbsp;</p>
<p id="ois4" class="ois">&nbsp;</p>
<p id="ois5" class="ois">&nbsp;</p>
</div>

<style><!--
#os0{position:absolute; z-index:1; width:800px; font-size:30px; color:lime; text-shadow:1px 1px black; transform:translate(0px,550px);}
.os{position:absolute; z-index:1; width:40px; height:40px; border-radius:50%; background:lime; box-shadow:inset 5px 5px 8px black;}
#os1{transform:translate(750px,20px);}
#os2{transform:translate(750px,80px);}
#os3{transform:translate(750px,140px);}
#os4{transform:translate(750px,200px);}
#os5{transform:translate(750px,260px);}
.ois{position:absolute; z-index:1; width:0px; height:600px; transition:all 1s linear;}
#ois1{background:url('http://ekladata.com/33ljFjgZoAQPi1kO2mQwMqidTaY.jpg'); background-size:800px 600px;}
#ois2{background:url('http://ekladata.com/UqzbyISwHRyEVpmNYUubeHwlguU.jpg'); background-size:800px 600px;}
#ois3{background:url('http://ekladata.com/g2nlFDkHgU99uspdD5IC5DzMg9k.jpg'); background-size:800px 600px;}
#ois4{background:url('http://ekladata.com/ch-itrXQv7pDepr7MyWt-UPqtw4.jpg'); background-size:800px 600px;}
#ois5{background:url('http://ekladata.com/u6blJSXia0ziK_bsbkMu_mxNvWA.jpg'); background-size:800px 600px;}
#os1:active ~ #ois1,#os2:active ~ #ois2,#os3:active ~ #ois3,#os4:active ~ #ois4,#os5:active ~ #ois5{width:800px;}
--></style>