Montage 22

Pour celles et ceux qui préfèrent les boutons à cliquer...

<div id="mtg22"><input id="pt1" class="pt" type="button" /><input id="pt2" class="pt" type="button" /><input id="pt3" class="pt" type="button" /><input id="pt4" class="pt" type="button" /><input id="pt5" class="pt" type="button" /><input id="pt6" class="pt" type="button" /><input id="pt7" class="pt" type="button" /><input id="pt8" class="pt" type="button" />
<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><!--
#mtg22{width:60vw; height:33.75vw; border:0.4vh ridge grey; margin:1vh auto; background:url('http://ekladata.com/x7gpvfVdwDTD2RU2emyk_k7IT_c.jpg'); background-size:60vw 33.75vw;}
.pt{position:absolute; z-index:10; width:1.5vw; height:1.5vw; border-radius:50%; border:0.1vh solid black; border-bottom:0.3vw solid #4753f3;}
#pt1{box-sizing:border-box; transform:translate(58vw,1vw);}
#pt2{box-sizing:border-box; transform:translate(58vw,3vw);}
#pt3{box-sizing:border-box; transform:translate(58vw,5vw);}
#pt4{box-sizing:border-box; transform:translate(58vw,7vw);}
#pt5{box-sizing:border-box; transform:translate(58vw,9vw);}
#pt6{box-sizing:border-box; transform:translate(58vw,11vw);}
#pt7{box-sizing:border-box; transform:translate(58vw,13vw);}
#pt8{box-sizing:border-box; transform:translate(58vw,15vw);}
#pt1:focus,#pt2:focus,#pt3:focus,#pt4:focus,#pt5:focus,#pt6:focus,#pt7:focus,#pt8:focus{background:red!important;}
.mg{position:absolute; z-index:1; width:60vw; height:33.75vw; opacity:0; transition:all 0.5s linear;}
#mg1{background:url('http://ekladata.com/hcouDMrAJb4yNNUd-z1NUxgAShc.jpg'); background-size:60vw 33.75vw;}
#mg2{background:url('http://ekladata.com/F6wRnrBod3KlREEJkffavvW8Kx4.jpg'); background-size:60vw 33.75vw;}
#mg3{background:url('http://ekladata.com/fW7fRVMdPDA4h2-sU4U1SYnPEig.jpg'); background-size:60vw 33.75vw;}
#mg4{background:url('http://ekladata.com/YtBRHzTrDprelB7Pgl0bf5h-Z7o.jpg'); background-size:60vw 33.75vw;}
#mg5{background:url('http://ekladata.com/oSPp6Hqim_WjjrZiFfwTa1mJQGw.jpg'); background-size:60vw 33.75vw;}
#mg6{background:url('http://ekladata.com/L82CYD94yD5deqn2tfOjcziXsdU.jpg'); background-size:60vw 33.75vw;}
#mg7{background:url('http://ekladata.com/8ZhEpg-9sllyis6WH2xW5CU2Wec.jpg'); background-size:60vw 33.75vw;}
#mg8{background:url('http://ekladata.com/7igvvBwmnYjy4lVuV30ocHsCXxA.jpg'); background-size:60vw 33.75vw;}
#pt1:focus ~ #mg1,#pt2:focus ~ #mg2,#pt3:focus ~ #mg3,#pt4:focus ~ #mg4,#pt5:focus ~ #mg5,#pt6:focus ~ #mg6,#pt7:focus ~ #mg7,#pt8:focus ~ #mg8{opacity:1;}
--></style>