Mont2.5.4.23

Même principe que le précédent mais sans diviser les images en deux, pour simplifier le code.

<div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/1c73jI7xXewtNxGtCEfml_hnKRk.jpg'); background-size: cover;"><input id="bta" class="bt" type="text" value="1" /><input id="btb" class="bt" type="text" value="2" /><input id="btc" class="bt" type="text" value="3" /><input id="btd" class="bt" type="text" value="4" /><input id="bte" class="bt" type="text" value="5" /><input id="btf" class="bt" type="text" value="6" /><input id="btg" class="bt" type="text" value="7" /><input id="bth" class="bt" type="text" value="8" />
<p id="mg1" class="mg">&nbsp;</p>
<p id="mg2" class="mg">&nbsp;</p>
<p id="mg3" class="mg">&nbsp;</p>
<p id="mg4" class="mg">&nbsp;</p>
<p id="mg5" class="mg">&nbsp;</p>
<p id="mg6" class="mg">&nbsp;</p>
<p id="mg7" class="mg">&nbsp;</p>
<p id="mg8" class="mg">&nbsp;</p>
</div>
<style><!--
.bt{position:absolute; z-index:5; width:25px; height:25px; border-radius:50%; border:1px solid black; background-color:white; text-align:center;}
#bta{transform:translate(300px,0px);}
#btb{transform:translate(350px,0px);}
#btc{transform:translate(400px,0px);}
#btd{transform:translate(450px,0px);}
#bte{transform:translate(500px,0px);}
#btf{transform:translate(550px,0px);}
#btg{transform:translate(600px,0px);}
#bth{transform:translate(650px,0px);}
.mg{position:absolute; z-index:2; width:0px; height:563px; transition:all 1s;}
#mg1{background:url('http://ekladata.com/YSw4M82O_-ZwFMto3bmHjXBrdrM.jpg'); background-size:1000px 563px; background-position:0px 0px; transform:translate(0px, 0px);}
#mg2{background:url('http://ekladata.com/gBH10-rtDS-aZwxUUAipJoD5luc.jpg'); background-size:1000px 563px; background-position:-1000px 0px; transform:translate(1000px, 0px);}
#mg3{background:url('http://ekladata.com/vaae-y8qlt4c9Q46bASLellET2w.jpg'); background-size:1000px 563px; background-position:0px 0px; transform:translate(0px, 0px);}
#mg4{background:url('http://ekladata.com/AqfU4lN5yAcbC7iJztSxHTXKnZc.jpg'); background-size:1000px 563px; background-position:-1000px 0px; transform:translate(1000px, 0px);}
#mg5{background:url('http://ekladata.com/zqIyL85SJ-oPSkTFKihyuCPgWoQ.jpg'); background-size:1000px 563px; background-position:0px 0px; transform:translate(0px, 0px);}
#mg6{background:url('http://ekladata.com/Eii__TNwNq6tlAYdNPzVIiiQotE.jpg'); background-size:1000px 563px; background-position:-1000px 0px; transform:translate(1000px, 0px);}
#mg7{background:url('http://ekladata.com/fTwPPWmq0EzglOY9FMVwhq95SDM.jpg'); background-size:1000px 563px; background-position:0px 0px; transform:translate(0px, 0px);}
#mg8{background:url('http://ekladata.com/G4uf0I8B6tam0uzAsZbTel8S8ZM.jpg'); background-size:1000px 563px; background-position:-1000px 0px; transform:translate(1000px, 0px);}
.bt:focus{background:green;}
#bta:focus ~ #mg1,#btb:focus ~ #mg2,#btc:focus ~ #mg3,#btd:focus ~ #mg4,#bte:focus ~ #mg5,#btf:focus ~ #mg6,#btg:focus ~ #mg7,#bth:focus ~ #mg8{z-index:4; width:1000px; background-position:0px 0px; transform:translate(0px,0px);}
--></style>