30.01.2024

 1+5 images dans un montage en 800x600px.

J'ai essayer d'écrire ce code de façon à ce que vous n'ayez qu'à  remplacer les adresses de mes images par les vôtres.

<div style="width: 800px; height: 600px; margin: 30px auto; text-align: left;">
<input id="cd1" class="cd" type="text" />
<input id="cd2" class="cd" type="text" />
<input id="cd3" class="cd" type="text" />
<input id="cd4" class="cd" type="text" />
<input id="cd5" class="cd" type="text" />
<p id="gf">&nbsp;</p>
<p id="exp">Clic sur chaque bouton puis survol montage.</p>
<p id="ref1" class="gb">&nbsp;</p>
<p id="ref2" class="gb">&nbsp;</p>
<p id="ref3" class="gb">&nbsp;</p>
<p id="ref4" class="gb">&nbsp;</p>
</div>

<style><!--
.cd{position:absolute; z-index:10; width:30px; height:30px; border:none; border-radius:50%; box-shadow:inset 3px 3px 5px black; background:lime;}
#cd1{ transform:translate(750px,150px);}
#cd2{ transform:translate(750px,220px);}
#cd3{ transform:translate(750px,290px);}
#cd4{ transform:translate(750px,360px);}
#cd5{ transform:translate(750px,430px);}
#gf{position:absolute; z-index:5; width:800px; height:600px;}
#exp{position:absolute; z-index:1; width:800px; text-align:center; font-size:20px;}
.gb{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/wuD5Wi24LWVJcOE5WTOU6pZZWzc.jpg'); background-size:800px 600px; transition:all 1s;}
#ref1{box-sizing:border-box; width:150px; height:400px; border:3px solid white; background-position:-100px -100px; transform:translate(100px,100px) skewy(25deg);}
#ref2{box-sizing:border-box;width:150px; height:400px; border:3px solid white;; background-position:-250px -100px; transform:translate(250px,100px) skewy(-25deg);}
#ref3{box-sizing:border-box;width:150px; height:400px; border:3px solid white; background-position:-400px -100px; transform:translate(400px,100px) skewy(25deg);}
#ref4{box-sizing:border-box;width:150px; height:400px; border:3px solid white; background-position:-550px -100px; transform:translate(550px,100px) skewy(-25deg);}
#cd1:focus ~ .gb{background:url('http://ekladata.com/0MAeipa3tUizrYFjQOROj_MZQcA.jpg');background-size:800px 600px;}
#cd2:focus ~ .gb{background:url('http://ekladata.com/JBIcwEMQC-jKepX4xaGBLLruXgM.jpg');background-size:800px 600px;}
#cd3:focus ~ .gb{background:url('http://ekladata.com/kqyAKmuzQE2KQ71jRCkyA13ed5I.jpg');background-size:800px 600px;}
#cd4:focus ~ .gb{background:url('http://ekladata.com/YmkTkfg2XMFPxJazGunHQmwfB94.jpg');background-size:800px 600px;}
#cd5:focus ~ .gb{background:url('http://ekladata.com/QdA6C3f_DzXuTbloJJBCrXoTrSg.jpg');background-size:800px 600px;}
.cd:focus{background:coral; border:none;}
#cd1:focus ~ #ref1,#cd2:focus ~ #ref1,#cd3:focus ~ #ref1,#cd4:focus ~ #ref1,#cd5:focus ~ #ref1{z-index:1; background-position:-100px -100px;}
#cd1:focus ~ #ref2,#cd2:focus ~ #ref2,#cd3:focus ~ #ref2,#cd4:focus ~ #ref2,#cd5:focus ~ #ref2{z-index:1; background-position:-250px -100px;}
#cd1:focus ~ #ref3,#cd2:focus ~ #ref3,#cd3:focus ~ #ref3,#cd4:focus ~ #ref3,#cd5:focus ~ #ref3{z-index:1; background-position:-400px -100px;}
#cd1:focus ~ #ref4,#cd2:focus ~ #ref4,#cd3:focus ~ #ref4,#cd4:focus ~ #ref4,#cd5:focus ~ #ref4{z-index:1; background-position:-550px -100px;}
#gf:hover ~ #ref1{z-index:3; border:none; width:200px; height:600px; background-position:0px 0px; transform:translate(0px,0px) skewy(0deg);}
#gf:hover ~ #ref2{z-index:3; border:none; width:200px; height:600px; background-position:-200px 0px; transform:translate(200px,0px) skewy(0deg);}
#gf:hover ~ #ref3{z-index:3; border:none; width:200px; height:600px; background-position:-400px 0px; transform:translate(400px,0px) skewy(0deg);}
#gf:hover ~ #ref4{z-index:3; border:none; width:200px; height:600px; background-position:-600px 0px; transform:translate(600px,0px) skewy(0deg);}
--></style>