• Changement au clic, sans animation, en CSS.

    Vous pouvez ajouter des couples bouton/image selon votre besoin.

    Le dernier bouton (ici "ph5") ne commande rien mais ramène le montage au départ.

    Clic

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.6vh ridge white;"><input id="ph1" class="ph" type="text" /><input id="ph2" class="ph" type="text" /><input id="ph3" class="ph" type="text" /><input id="ph4" class="ph" type="text" /><input id="ph5" class="ph" type="text" />
    <p id="clic">Clic</p>
    <p id="mtg">&nbsp;</p>
    </div>

    <style><!--
    #clic{position:absolute; z-index:2; width:5vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5);}
    .ph{position:absolute; z-index:2; width:60vw; height:33.75vw; border:none; background:transparent;}
    #ph1{z-index:5;}
    #mtg{position:absolute; z-index:1;width:60vw; height:33.75vw; background:url('http://ekladata.com/0291y7-qR-Ihnu-5EpMZvN-mC1w.jpg'); background-size:60vw 33.75vw;}
    #ph1:focus ~ #ph2,#ph2:focus ~ #ph3,#ph3:focus ~ #ph4,#ph4:focus ~ #ph5{ z-index:6;}
    #ph1:focus ~ #mtg{background:url('http://ekladata.com/XXR4dGUEil3ZYC4_0ygeFP-gm-k.jpg'); background-size:60vw 33.75vw;}
    #ph2:focus ~ #mtg{background:url('http://ekladata.com/6TY5vUtT4KwnUf-tJNsaBos02zs.jpg'); background-size:60vw 33.75vw;}
    #ph3:focus ~ #mtg{background:url('http://ekladata.com/8vug6kpyjv8lQ9q1zj4l2BpUsCE.jpg'); background-size:60vw 33.75vw;}
    #ph4:focus ~ #mtg{background:url('http://ekladata.com/T5K_fP6CpOJZKO-H4EzHx4H0w5c.jpg'); background-size:60vw 33.75vw;}
    --></style>