Commandes

Ce montage est juste destiné à montrer les 3 commandes habituelles: survol, clic maintenu et clic afin de visualiser les différences d'animation.

Pour le clic, il faut un second clic pour revenir au départ: j'ai ajouté le bouton rouge car sinon, le survol ne fonctionne plus directement après un clic.

J'ai ajouté un filtre sépia/couleur et si vous voulez utiliser ce montage pour un article, après tout, vous n'avez qu'à remplacer mes 7 adresses d'images par les vôtres.

 

Survol

Clic maintenu

Clic

Le cadre du montage est au ratio 16/9, en 1000px par 563px.

Le fond gris pour les commandes.

Les 3 types de commandes.

Les 2x3 +1 boutons.

Les 6 + 1 images.

L'animation est par changement d'opacité.

Les animations au survol, clic maintenu et clic

<div style="width: 1000px; height: 563px; border: 4px ridge white; box-shadow: 4px 4px 8px black; margin: 30px auto; text-align: left;">
<p id="cc1">&nbsp;</p>
<p id="inf1">Survol</p>
<p id="inf2">Clic maintenu</p>
<p id="inf3">Clic</p>
<input id="cd1" class="cd" type="text" value="1" /> <input id="cd2" class="cd" type="text" value="2" /> <input id="cd3" class="cd" type="text" value="3" /> <input id="cd4" class="cd" type="text" value="4" /> <input id="cd5" class="cd" type="text" value="5" /> <input id="cd6" class="cd" type="text" value="6" /> <input id="cd0" class="cd" type="text" value="x" /> <img id="ps0" src="https://ekladata.com/CDXc61hFUxo1aDnzjf8YYnx_IxI.jpg" alt="" /> <img id="ps1" class="ps" src="https://ekladata.com/1uwp2JQQ9LKIBTy5GfLCZ--cUZg.jpg" alt="" /> <img id="ps2" class="ps" src="https://ekladata.com/dmcwn4UEFH-ufevntc6sOd6Awjs.jpg" alt="" /> <img id="ps3" class="ps" src="https://ekladata.com/JBJeAFD-kd0MWAu5x8DEBR4xI5w.jpg" alt="" /> <img id="ps4" class="ps" src="https://ekladata.com/XOBO5LH-SvOuI4n2KhzNmNc_kDA.jpg" alt="" /> <img id="ps5" class="ps" src="https://ekladata.com/hg-aNfowNzVNn1iWwGkw4HTAHgo.jpg" alt="" /> <img id="ps6" class="ps" src="https://ekladata.com/qkcEub8BC6nWHiLzrh5Nfwq2oi0.jpg" alt="" /></div>
<style><!--
#cc1{position:absolute; z-index:1; width:1000px; height:40px; background:rgba(0,0,0,0.5); transform:translate(0px,0px); line-height:30px;}
#inf1{position:absolute; z-index:1;font-size:25px; color:white; transform:translate(50px,0px);}
#inf2{position:absolute; z-index:1;font-size:25px; color:white; transform:translate(290px,0px);}
#inf3{position:absolute; z-index:1;font-size:25px; color:white; transform:translate(700px,0px);}
.cd{position:absolute; z-index:5; width:28px; height:28px; border-radius:50%; font-size:30px; background:white; border:1px solid black; text-align:center; font-weight:bold;}
#cd1{transform:translate(150px,5px);}
#cd2{transform:translate(200px,5px);}
#cd3{transform:translate(500px,5px);}
#cd4{transform:translate(550px,5px);}
#cd5{transform:translate(800px,5px);}
#cd6{transform:translate(850px,5px);}
#cd0{transform:translate(900px,5px); background:red;}
#ps0{position:absolute; z-index:0; width:1000px; height:563px;}
.ps{position:absolute; z-index:2; width:1000px; height:563px; transform:translate(0px,0px); filter:sepia(1); transition:all 1s, filter 1s 1s;}
#ps1, #ps2,#ps3, #ps4,#ps5, #ps6{opacity:0;}
#cd1:hover ~ #ps1, #cd2:hover ~ #ps2,#cd3:active ~ #ps3, #cd4:active ~ #ps4,#cd5:focus ~ #ps5, #cd6:focus ~ #ps6{opacity:1; filter:sepia(0);}
--></style>