Exemple 221

Il est relativement simple d'écrire un code avec survol de boutons pour afficher des images.

Les dimensions du montage sont à votre choix et le nombre d'images aussi: ici 1000px par 563px et 1+7 images au ratio 16/9.

L'animation des images qui s'affichent au survol d'un bouton peut également s'adapter à votre choix: changement d'opacité, glissement, apparition centrale, rotation, etc...  ici, opacité.

Survol

 

 

 

 

 

 

 

<div style="width: 1000px; height: 563px; border: 1px solid black; margin: 5px auto; background: url('http://ekladata.com/evRZhOwsatKKS36U3sW98QNZVnw.jpg'); background-size: cover; text-align: left;">
<p id="bt0">Survol</p>
<p id="bt1" class="bt">&nbsp;</p>
<p id="bt2" class="bt">&nbsp;</p>
<p id="bt3" class="bt">&nbsp;</p>
<p id="bt4" class="bt">&nbsp;</p>
<p id="bt5" class="bt">&nbsp;</p>
<p id="bt6" class="bt">&nbsp;</p>
<p id="bt7" class="bt">&nbsp;</p>
<img id="mg1" class="mg" src="http://ekladata.com/X2hUbWJlbUzfJh32ISB5Ungr3cU.jpg" alt="" /> <img id="mg2" class="mg" src="http://ekladata.com/fwgd8MM0qw354vdAIVjZZwNnAeU.jpg" alt="" /> <img id="mg3" class="mg" src="http://ekladata.com/6P8v9D-1J7J3hg0Dv4C4o50JO_o.jpg" alt="" /> <img id="mg4" class="mg" src="http://ekladata.com/o-SQ4d3gJJcp0IB__PSLvXgffQs.jpg" alt="" /> <img id="mg5" class="mg" src="http://ekladata.com/xdfoDFOrr7PmAvzo6hInS7oiXhM.jpg" alt="" /> <img id="mg6" class="mg" src="http://ekladata.com/TCRzler3sNKxLbQPCGxuByz4bFo.jpg" alt="" /> <img id="mg7" class="mg" src="http://ekladata.com/FzkB6IU_Gi4XvqONJfmTPelyUOg.jpg" alt="" /></div>

<style><!--
#bt0{position:absolute; z-index:1; width:130px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(850px,20px);}
.bt{position:absolute; z-index:5; width:30px; height:30px; border-radius:50%; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; background:lime;}
.bt:hover{background:red;}
#bt1{transform:translate(930px,80px);}
#bt2{transform:translate(930px,130px);}
#bt3{transform:translate(930px,180px);}
#bt4{transform:translate(930px,230px);}
#bt5{transform:translate(930px,280px);}
#bt6{transform:translate(930px,330px);}
#bt7{transform:translate(930px,390px);}
.mg{position:absolute; z-index:1; width:1000px; height:563px; opacity:0; filter:grayscale(1); transition:opacity 1s linear 0s, filter 1s linear 1.5s;}
#bt1:hover ~ #mg1,#bt2:hover ~ #mg2,#bt3:hover ~ #mg3,#bt4:hover ~ #mg4,#bt5:hover ~ #mg5,#bt6:hover ~ #mg6,#bt7:hover ~ #mg7{opacity:1; filter:grayscale(0);}
--></style>