Zoom3 henri

Je me suis pris au jeu et j'ai cherché à pour pouvoir modifier l'image en référence, par un clic sur des boutons, tout en conservant les survols des sélections.

<div style="width: 50vw; height: 30vw; margin: 2vh auto;"><input id="py1" class="put" type="text" /><input id="py2" class="put" type="text" /><input id="py3" class="put" type="text" />
<p id="sel1" class="sel">&nbsp;</p>
<p id="sel2" class="sel">&nbsp;</p>
<p id="sel3" class="sel">&nbsp;</p>
<p id="sel4" class="sel">&nbsp;</p>
<p id="sel5" class="sel">&nbsp;</p>
<p id="sel6" class="sel">&nbsp;</p>
<p id="sel7" class="sel">&nbsp;</p>
<p id="sel8" class="sel">&nbsp;</p>
<p id="mod1" class="md1">&nbsp;</p>
<p id="ecran" class="aaa">&nbsp;</p>
</div>
<style><!--
.put{position:absolute; width:1.5vw; height:1.5vw; border-radius:50%; background:linear-gradient(to bottom, grey 0%, pink 100%); border-none;}
#py1{transform:translate(36vw,0vw);}
#py2{transform:translate(40vw,0vw);}
#py3{transform:translate(44vw,0vw);}
.sel{position:absolute; z-index:2; box-sizing:border-box; border:0.2vh dashed white; width:4vw; height:4.5vw;}
#sel1{transform:translate(34vw,5vw);}
#sel2{transform:translate(38vw,5vw);}
#sel3{transform:translate(42vw,5vw);}
#sel4{transform:translate(46vw,5vw);}
#sel5{transform:translate(34vw,9.5vw);}
#sel6{transform:translate(38vw,9.5vw);}
#sel7{transform:translate(42vw,9.5vw);}
#sel8{transform:translate(46vw,9.5vw);}
.md1{background:url('http://ekladata.com/rNp_aZvs2jN1LYrypm3Bea5-cqI.jpg'); background-size:16vw 9vw;}
#mod1{position:absolute; z-index:1; width:16vw; height:9vw; transform:translate(34vw,5vw);}
.aaa{background:url('http://ekladata.com/rNp_aZvs2jN1LYrypm3Bea5-cqI.jpg'); background-size:80vw 45vw;}
#ecran{position:absolute; z-index:1; width:20vw; height:22.5vw; transform:translate(0vw,0vw);}
#sel1:hover ~ #ecran{ background-position:0vw 0vw;}
#sel2:hover ~ #ecran{background-position:-20vw 0vw;}
#sel3:hover ~ #ecran{background-position:-40vw 0vw;}
#sel4:hover ~ #ecran{background-position:-60vw 0vw;}
#sel5:hover ~ #ecran{background-position:0vw -22.5vw;}
#sel6:hover ~ #ecran{background-position:-20vw -22.5vw;}
#sel7:hover ~ #ecran{background-position:-40vw -22.5vw;}
#sel8:hover ~ #ecran{background-position:-60vw -22.5vw;}
#py1:focus ~ .md1{background:url('http://ekladata.com/rNp_aZvs2jN1LYrypm3Bea5-cqI.jpg'); background-size:16vw 9vw;}
#py2:focus ~ .md1{background:url('http://ekladata.com/-9RU7-Zoa1-mlkcBFmifKbpV_VE.jpg'); background-size:16vw 9vw;}
#py3:focus ~ .md1{background:url('http://ekladata.com/xd9V3F_OShL5o0AfPIkEoxeM_pE.jpg'); background-size:16vw 9vw;}
#py1:focus ~ .aaa{background:url('http://ekladata.com/rNp_aZvs2jN1LYrypm3Bea5-cqI.jpg'); background-size:80vw 45vw;}
#py2:focus ~ .aaa{background:url('http://ekladata.com/-9RU7-Zoa1-mlkcBFmifKbpV_VE.jpg'); background-size:80vw 45vw;}
#py3:focus ~ .aaa{background:url('http://ekladata.com/xd9V3F_OShL5o0AfPIkEoxeM_pE.jpg'); background-size:80vw 45vw;}
--></style>

Une image est définie par défaut et le clic sur un bouton la change, dans l'images de référence des vignettes (.md1) et dans l'écran (.aaa).