07.10.2024

 6 images en 16/9 dans un montage en 1200x675px

Clic sur parties colorées.

---

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;"><input id="fond1" class="fonda" type="text" /> <input id="fond2" class="fondb" type="text" /> <input id="fond3" class="fondc" type="text" /> <input id="fond4" class="fondd" type="text" /> <input id="fond5" class="fonde" type="text" /> <input id="fond6" class="fondf" type="text" /> <input id="fond7" class="fonda" type="text" /> <input id="fond8" class="fondb" type="text" /> <input id="fond9" class="fondc" type="text" /> <input id="fond10" class="fondd" type="text" /> <input id="fond11" class="fonde" type="text" /> <input id="fond12" class="fondf" type="text" />

<p id="gr">Clic sur parties color&eacute;es.</p>

</div>

<style><!--

#gr{position:absolute; z-index:1; width:500px; font-size:35px; color:coral; text-shadow:2px 2px black; transform:translate(450px,250px) rotate(-30deg);}

.fonda{position:absolute; z-index:1; width:1200px; height:675px;  background:url('http://ekladata.com/mfPvF1cu8UYgfGEhiw5btZTRuh8.jpg'); background-size:1200px 675px; transition:all 1s;}

.fondb{position:absolute; z-index:1; width:1200px; height:675px; background:url('http://ekladata.com/Y1qn7s_VT1b6Kn_7G6W10iRqr9A.jpg'); background-size:1200px 675px; transition:all 1s;} 

.fondc{position:absolute; z-index:1; width:1200px; height:675px; background:url('http://ekladata.com/otPmO2W7Dmf_uBd-fRDf4ZSSBJ4.jpg'); background-size:1200px 675px; transition:all 1s;}

.fondd{position:absolute; z-index:1; width:1200px; height:675px; background:url('http://ekladata.com/8_JWBpAA1l2AAOColayqh_3cG4o.jpg'); background-size:1200px 675px; transition:all 1s;} 

.fonde{position:absolute; z-index:1; width:1200px; height:675px; background:url('http://ekladata.com/yG-j97obfhKL68szthyoE9MCrgs.jpg'); background-size:1200px 675px; transition:all 1s;}

.fondf{position:absolute; z-index:1; width:1200px; height:675px; background:url('http://ekladata.com/sfBAn46JvMT0poYwQX91SWdOCTI.jpg'); background-size:1200px 675px; transition:all 1s;} 

#fond1{clip-path:polygon(5% 10%, 20% 10%, 20% 25%, 5% 25%);}

#fond2{clip-path:polygon(30% 10%, 45% 10%, 45% 25%, 30% 25%);}

#fond3{clip-path:polygon(55% 10%, 70% 10%, 70% 25%, 55% 25%);}

#fond4{clip-path:polygon(5% 30%, 20% 30%, 20% 45%, 5% 45%);}

#fond5{clip-path:polygon(30% 30%, 45% 30%, 45% 45%, 30% 45%);}

#fond6{clip-path:polygon(5% 50%, 20% 50%, 20% 65%, 5% 65%);}

#fond7{clip-path:polygon(80% 75%, 95% 75%, 95% 90%, 80% 90%); filter:grayscale(1);}

#fond8{clip-path:polygon(55% 75%, 70% 75%, 70% 90%, 55% 90%); filter:grayscale(1);}

#fond9{clip-path:polygon(30% 75%, 45% 75%, 45% 90%, 30% 90%); filter:grayscale(1);}

#fond10{clip-path:polygon(80% 55%, 95% 55%, 95% 70%, 80% 70%); filter:grayscale(1);}

#fond11{clip-path:polygon(55% 55%, 70% 55%, 70% 70%, 55% 70%); filter:grayscale(1);}

#fond12{clip-path:polygon(80% 35%, 95% 35%, 95% 50%, 80% 50%); filter:grayscale(1);}

#fond1:focus,#fond2:focus,#fond3:focus,#fond4:focus,#fond5:focus,#fond6:focus{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 50% 50%, 0% 100%);  border:none;}

#fond1:focus ~ #fond7,#fond2:focus ~ #fond8,#fond3:focus ~ #fond9,#fond4:focus ~ #fond10,#fond5:focus ~ #fond11,#fond6:focus ~ #fond12{z-index:5; clip-path:polygon(49% 49%, 99% 0%, 99% 99%, 0% 99%); filter:grayscale(0);}

--></style>