Pour Nicole

Un de mes montage à donner une idée à cette fidèle visiteuse d'outre atlantique: j'avais placé 4 images en 800x600px, dans mon exemple mais elle souhaite en placer 12 !

Le résultat donne un code très répétitif, certes, mais impressionnant et si je devais trouver un tel code sur un site, je crois que je fuirais !

Néanmoins, je vais repérer les 12 adresses de mes images en 800x600px plus celle de fond et il vous suffira de remplacer mes adresses d'images par les vôtres.

Le montage fait 800x600px avec une bordure de 6px, soit 812px par 612px.

Clic sur chaque vignette avec retour par un clic sur la croix.

Le cadre (qq) et le bouton X; chaque image est découpée en 3 parties: k1a/k1b/k1c; la première partie (k1a) est placée en fond de bouton au clic (input) et est animée au clic, qui commande l'animation des 2 autres parties (k1b et k1c) ... et ceci pour chaque image.
Remplacez les 12 adresses de mes images par les vôtres et, si j'ai bien fait mon "travail", le montage devrait fonctionner chez vous !

<div id="qq"><input id="out" type="text" value="X" /> <input id="k1a" class="ka" type="text" /><span id="k1b" class="ka">&nbsp;</span> <span id="k1c" class="ka">&nbsp;</span> <input id="k2a" class="kb" type="text" /><span id="k2b" class="kb">&nbsp;</span> <span id="k2c" class="kb">&nbsp;</span> <input id="k3a" class="kc" type="text" /><span id="k3b" class="kc">&nbsp;</span> <span id="k3c" class="kc">&nbsp;</span> <input id="k4a" class="kd" type="text" /><span id="k4b" class="kd">&nbsp;</span> <span id="k4c" class="kd">&nbsp;</span> <input id="k5a" class="ke" type="text" /><span id="k5b" class="ke">&nbsp;</span> <span id="k5c" class="ke">&nbsp;</span> <input id="k6a" class="kf" type="text" /><span id="k6b" class="kf">&nbsp;</span> <span id="k6c" class="kf">&nbsp;</span> <input id="k7a" class="kg" type="text" /><span id="k7b" class="kg">&nbsp;</span> <span id="k7c" class="kg">&nbsp;</span> <input id="k8a" class="kh" type="text" /><span id="k8b" class="kh">&nbsp;</span> <span id="k8c" class="kh">&nbsp;</span> <input id="k9a" class="kj" type="text" /><span id="k9b" class="kj">&nbsp;</span> <span id="k9c" class="kj">&nbsp;</span> <input id="k10a" class="kk" type="text" /><span id="k10b" class="kk">&nbsp;</span> <span id="k10c" class="kk">&nbsp;</span> <input id="k11a" class="kl" type="text" /><span id="k11b" class="kl">&nbsp;</span> <span id="k11c" class="kl">&nbsp;</span> <input id="k12a" class="km" type="text" /><span id="k12b" class="km">&nbsp;</span> <span id="k12c" class="km">&nbsp;</span></div>

<style><!--
#qq{position:relative; width:800px;  height:600px; border:6px ridge grey; margin:5px auto; background:url(http://ekladata.com/v0q1ppgGKf4AyAaO1wsvAl19CZc.jpg);}
#out{position:absolute; z-index:10; width:23px; height:30px; text-align:center; font-size:20pt; color:red !important; text-shadow:1px 1px black; transform:translate(770px,0px);}

.ka{background:url(http://ekladata.com/orHrEQ9NJdyQcfRHRPFJFlqFLEo.jpg );}
#k1a{position:absolute; z-index:2; transform:translate(40px,20px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none;}
#k1b{position:absolute; z-index:1; transform:translate(40px,220px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k1c{position:absolute; z-index:1; transform:translate(40px,420px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k1a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k1a:focus ~ #k1b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k1a:focus ~ #k1c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.kb{background:url(http://ekladata.com/BrrXrwHbpyfVYCfJDjdkQavfyRA.jpg );}
#k2a{position:absolute; z-index:2; transform:translate(230px,20px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k2b{position:absolute; z-index:1; transform:translate(230px,220px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k2c{position:absolute; z-index:1; transform:translate(230px,420px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k2a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k2a:focus ~ #k2b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k2a:focus ~ #k2c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.kc{background:url(http://ekladata.com/qohskEh3cHJO1otvrmP7LfOM_h4.jpg );}
#k3a{position:absolute; z-index:2; transform:translate(420px,20px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k3b{position:absolute; z-index:1; transform:translate(420px,220px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k3c{position:absolute; z-index:1; transform:translate(420px,420px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k3a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k3a:focus ~ #k3b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k3a:focus ~ #k3c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.kd{background:url(http://ekladata.com/KL3vO_vRwUnAEYxK3_IPJbz_HSs.jpg );}
#k4a{position:absolute; z-index:2; transform:translate(610px,20px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k4b{position:absolute; z-index:1; transform:translate(610px,220px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k4c{position:absolute; z-index:1; transform:translate(610px,420px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k4a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k4a:focus ~ #k4b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k4a:focus ~ #k4c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.ke{background:url(http://ekladata.com/XG2iC0zaHPQYEeBO7TJ0ovXdygs.jpg);}
#k5a{position:absolute; z-index:2; transform:translate(40px,220px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k5b{position:absolute; z-index:1; transform:translate(40px,20px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k5c{position:absolute; z-index:1; transform:translate(40px,420px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k5a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k5a:focus ~ #k5b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k5a:focus ~ #k5c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.kf{background:url(http://ekladata.com/_QKX9NEBmWVB1rPp3dkDT92ng-c.jpg);}
#k6a{position:absolute; z-index:2; transform:translate(230px,220px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k6b{position:absolute; z-index:1; transform:translate(230px,20px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k6c{position:absolute; z-index:1; transform:translate(230px,420px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k6a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k6a:focus ~ #k6b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k6a:focus ~ #k6c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.kg{background:url(http://ekladata.com/VcLgxvI9XIFBVFUCTcERAAfIKsw.jpg);}
#k7a{position:absolute; z-index:2; transform:translate(420px,220px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k7b{position:absolute; z-index:1; transform:translate(420px,20px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k7c{position:absolute; z-index:1; transform:translate(420px,420px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k7a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k7a:focus ~ #k7b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k7a:focus ~ #k7c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.kh{background:url(http://ekladata.com/njLP6tCIDyjggcA80nWiQLs9YBs.jpg);}
#k8a{position:absolute; z-index:2; transform:translate(610px,220px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k8b{position:absolute; z-index:1; transform:translate(610px,20px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k8c{position:absolute; z-index:1; transform:translate(610px,420px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k8a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k8a:focus ~ #k8b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k8a:focus ~ #k8c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.kj{background:url(http://ekladata.com/ayrnjBZ9Cmd1PQh57mEUEUPPz9Y.jpg);}
#k9a{position:absolute; z-index:2; transform:translate(40px,420px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k9b{position:absolute; z-index:1; transform:translate(40px,20px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k9c{position:absolute; z-index:1; transform:translate(40px,220px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k9a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k9a:focus ~ #k9b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k9a:focus ~ #k9c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.kk{background:url(http://ekladata.com/CdtgKHKg-nDEl6tlx9bgY-sALVA.jpg);}
#k10a{position:absolute; z-index:2; transform:translate(230px,420px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k10b{position:absolute; z-index:1; transform:translate(230px,20px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k10c{position:absolute; z-index:1; transform:translate(230px,220px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k10a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k10a:focus ~ #k10b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k10a:focus ~ #k10c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.kl{background:url(http://ekladata.com/FfY9YHK4e-EMLTWF3OWq9tn807A.jpg);}
#k11a{position:absolute; z-index:2; transform:translate(420px,420px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k11b{position:absolute; z-index:1; transform:translate(420px,20px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k11c{position:absolute; z-index:1; transform:translate(420px,220px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k11a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k11a:focus ~ #k11b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k11a:focus ~ #k11c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}

.km{background:url(http://ekladata.com/7oYc1YntD77yz5rLDb2a8IsdLVs.jpg);}
#k12a{position:absolute; z-index:2; transform:translate(610px,420px); width:150px; height:150px; border-radius:50%;  transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k12b{position:absolute; z-index:1; transform:translate(610px,20px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k12c{position:absolute; z-index:1; transform:translate(610px,220px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k12a:focus{ z-index:5; width:250px; height:600px; transform:translate(0px,0px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k12a:focus ~ #k12b{ z-index:5; width:300px; height:600px; transform:translate(250px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k12a:focus ~ #k12c{ z-index:5; width:250px; height:600px; transform:translate(550px,0px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
--></style>