Jeu 2

 5 images au ratio 16/9, dimensionnées en 1152x648px par le code.

Retrouvez et survolez la partie d'image de chaque bouton dans l'image en noir et blanc pour colorer cette dernière.

Un clic sur chaque bouton change l'image et la position de la partie d'image.

Dans le code, remplacez mes adresses d'images par les vôtres, en conservant le @1152x648 afin de redimensionner vos images au ratio 16/9.

Pour la bonne compréhension du montage, j'ai placé une bordure jaune sur chaque partie sélectionnée d'image; elle est à éliminer à la publication de votre montage.

De plus, elle est à positionner, sur chaque image, à l'endroit que vous avez choisi par: transform:translate(10vw,20vw);

Afin que chaque bouton affiche cet endroit, il faut que la partie de fond sélectionnée (#zone1a) reprenne ces valeurs mais en négatif: background-position:-10vw -20vw;

La partie d'image de chaque bouton (#zone1a) est placée sous un bouton transparent, au clic.(id="jeu1")

La même partie d'image sélectionnée (#zone1b) est définie par la zone cerclée de jaune, sur l'image principale.

Le survol de cette zone (#zone1b) modifie le filtre de l'image principale (#zone1c) qui passe du noir et blanc à la couleur: filter:grayscale(1); --> filter:grayscale(0);

Le clic sur chaque bouton (#jeu1 à #jeu5) modifie l'adresse de l'image principale (#zone1c) et la position de la zone cerclée de jaune (#zone1b)

div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left; background: linear-gradient(to bottom, rgba(100,200,100,0.8) 0%, rgba(0,100,200,0.3) 100%);"><input id="jeu1" class="jeu" type="text" /> <input id="jeu2" class="jeu" type="text" /> <input id="jeu3" class="jeu" type="text" /><input id="jeu4" class="jeu" type="text" /><input id="jeu5" class="jeu" type="text" />
<p id="zone1a" class="zn1">&nbsp;</p>
<p id="zone2a" class="zn1">&nbsp;</p>
<p id="zone3a" class="zn1">&nbsp;</p>
<p id="zone4a" class="zn1">&nbsp;</p>
<p id="zone5a" class="zn1">&nbsp;</p>
<p id="zone1b">&nbsp;</p>
<p id="zone1c">&nbsp;</p>
</div>

<style><!--
.jeu{position:absolute; z-index:10; width:4vw; height:4vw; border-radius:50%; background:transparent; border:none;}
#jeu1{transform: translate(55.5vw,2vw);}
#jeu2{transform: translate(55.5vw,7vw);}
#jeu3{transform: translate(55.5vw,12vw);}
#jeu4{transform: translate(55.5vw,17vw);}
#jeu5{transform: translate(55.5vw,22vw);}

.zn1{position:absolute; z-index:2;width:4vw; height:4vw; box-shadow:inset -0.4vh -0.4vh 0.6vh white, inset 0.4vh 0.4vh 0.6vh black; border-radius:50%;}
#zone1a{ background:url('http://ekladata.com/NLwzPeSP0bx5Mu-s3waCEYT73Hg@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-10vw -20vw; transform:translate(55.5vw,2vw);}
#zone2a{ background:url('http://ekladata.com/1oKzhJ4fPnfrZSJ7HWxviuR8wWo@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-35vw -12vw; transform:translate(55.5vw,7vw);}
#zone3a{ background:url('http://ekladata.com/2mvGe95O-co9jMjj7dgwPBZfXrg@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-26vw -27vw; transform:translate(55.5vw,12vw);}
#zone4a{ background:url('http://ekladata.com/xfcMlCGhYclsGqxqAjo4hx_KImU@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-39vw -20vw; transform:translate(55.5vw,17vw);}
#zone5a{ background:url('http://ekladata.com/U5Vp9pF0w4ZYu6iGQrkJK88ObqY@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-18vw -20vw; transform:translate(55.5vw,22vw);}

#zone1b{position:absolute; z-index:5; width:4vw; height:4vw; border:0.2vh solid yellow; border-radius:50; border-radius:50%;transform:translate(10vw,20vw);}

#zone1c{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/NLwzPeSP0bx5Mu-s3waCEYT73Hg@1152x648.jpg'); transform:translate(0vw,0vw); filter:grayscale(1);}

#zone1b:hover ~ #zone1c{filter:grayscale(0);}
#jeu2:focus ~ #zone1b{transform:translate(35vw,12vw);}
#jeu3:focus ~ #zone1b{transform:translate(26vw,27vw);}
#jeu4:focus ~ #zone1b{transform:translate(39vw,20vw);}
#jeu5:focus ~ #zone1b{transform:translate(18vw,20vw);}

#jeu2:focus ~ #zone1c{background:url('http://ekladata.com/1oKzhJ4fPnfrZSJ7HWxviuR8wWo@1152x648.jpg');}
#jeu3:focus ~ #zone1c{background:url('http://ekladata.com/2mvGe95O-co9jMjj7dgwPBZfXrg@1152x648.jpg');}
#jeu4:focus ~ #zone1c{background:url('http://ekladata.com/xfcMlCGhYclsGqxqAjo4hx_KImU@1152x648.jpg');}
#jeu5:focus ~ #zone1c{background:url('http://ekladata.com/U5Vp9pF0w4ZYu6iGQrkJK88ObqY@1152x648.jpg');}
--></style>