24.04.2024

Juste un exemple déjà proposé, en 1000x563px (16/9) et 6 images (déjà publiées) pour vous rappeler que pour modifier une animation de survol à clic, il suffit de changer la commande:

le survol est commandé par "hover" et le clic par "focus".

Si vous remplacez les hover du code par des focus, l'animation sera commandée au clic (ce qui explique le bouton 0, inutile au survol mais nécessaire au clic, pour revenir à zéro.).

Je vous laisse faire l'essai ! La taille du montage, le nombre d'images et leur ratio est à votre convenance.

<div style="width:1000px; height:563px; margin:50px auto; text-align:left; border:4px ridge white; box-shadow:4px 4px 8px black;">
<input id="cd0" class="cde" type="text" value="0">
<input id="cd1" class="cde" type="text" value="1">
<input id="cd2" class="cde" type="text" value="2">
<input id="cd3" class="cde" type="text" value="3">
<input id="cd4" class="cde" type="text" value="4">
<input id="cd5" class="cde" type="text" value="5">
<p id="fond">&nbsp;</p>
</div>

<style><!--
.cde{position:absolute; z-index:10; width:30px; height:20px; text-align:center; font-size:15px; border-radius:8px; background:coral; box-shadow:inset -2px -2px 4px black;}
#cd0{transform:translate(200px,0px); background:lightblue;}
#cd1{transform:translate(280px,0px);}
#cd2{transform:translate(360px,0px);}
#cd3{transform:translate(440px,0px);}
#cd4{transform:translate(520px,0px);}
#cd5{transform:translate(600px,0px);}
#fond{position:absolute; z-index:1; width:1000px; height:563px; background:url('http://ekladata.com/jd_oYjUYptVbkdxuEbN2IIcj29g.jpg'); background-size:cover;}
#cd1:hover~#fond{background:url('http://ekladata.com/O-nstxJhhdDMQGVXh9IaikLgVZg.jpg');background-size:cover;}
#cd2:hover~#fond{background:url('http://ekladata.com/cshZW2c8rFxVoYneosYpg71MG-w.jpg');background-size:cover;}
#cd3:hover~#fond{background:url('http://ekladata.com/jA4vCi3mMMYdYKpWZSNL7iet9HU.jpg');background-size:cover;}
#cd4:hover~#fond{background:url('http://ekladata.com/JRe0cXgCtKS7MzT_iB02NKnZo2Y.jpg');background-size:cover;}
#cd5:hover~#fond{background:url('http://ekladata.com/rmVFsEpWh7yv4hEKtxBZv6o-_ew.jpg');background-size:cover;}
--></style>

au clic:

<div style="width:1000px; height:563px; margin:50px auto; text-align:left; border:4px ridge white; box-shadow:4px 4px 8px black;">
<input id="cd0" class="cde" type="text" value="0">
<input id="cd1" class="cde" type="text" value="1">
<input id="cd2" class="cde" type="text" value="2">
<input id="cd3" class="cde" type="text" value="3">
<input id="cd4" class="cde" type="text" value="4">
<input id="cd5" class="cde" type="text" value="5">
<p id="fond">&nbsp;</p>
</div>

<style><!--
.cde{position:absolute; z-index:10; width:30px; height:20px; text-align:center; font-size:15px; border-radius:8px; background:coral; box-shadow:inset -2px -2px 4px black;}
#cd0{transform:translate(200px,0px); background:lightblue;}
#cd1{transform:translate(280px,0px);}
#cd2{transform:translate(360px,0px);}
#cd3{transform:translate(440px,0px);}
#cd4{transform:translate(520px,0px);}
#cd5{transform:translate(600px,0px);}
#fond{position:absolute; z-index:1; width:1000px; height:563px; background:url('http://ekladata.com/jd_oYjUYptVbkdxuEbN2IIcj29g.jpg'); background-size:cover;}
#cd1:focus~#fond{background:url('http://ekladata.com/O-nstxJhhdDMQGVXh9IaikLgVZg.jpg');background-size:cover;}
#cd2:focus~#fond{background:url('http://ekladata.com/cshZW2c8rFxVoYneosYpg71MG-w.jpg');background-size:cover;}
#cd3:focus~#fond{background:url('http://ekladata.com/jA4vCi3mMMYdYKpWZSNL7iet9HU.jpg');background-size:cover;}
#cd4:focus~#fond{background:url('http://ekladata.com/JRe0cXgCtKS7MzT_iB02NKnZo2Y.jpg');background-size:cover;}
#cd5:focus~#fond{background:url('http://ekladata.com/rmVFsEpWh7yv4hEKtxBZv6o-_ew.jpg');background-size:cover;}
--></style>