• Exemple 43

    Un montage tout simple avec quelques photos du jardin bien sec ! 5+1 images au ratio 16/9, redimensionnées par le code en 1152x648px.

    Vous pouvez ajouter autant de couples bouton/image que vous le souhaitez.

    Survol de chaque bouton.

    A

    B

    C

    D

    E

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black;">
    <p id="dd1" class="dd">A</p>
    <p id="dd2" class="dd">B</p>
    <p id="dd3" class="dd">C</p>
    <p id="dd4" class="dd">D</p>
    <p id="dd5" class="dd">E</p>
    <p id="fond">&nbsp;</p>
    </div>

    <style><!--
    .dd{position:absolute; z-index:5; width:4vw; height:2vw; border-radius:1vw; border:0.2vh solid black; background:rgba(0,100,200,0.5); box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; font-size:1.2vw; text-align:center; line-height:2vw;}
    #dd1{transform:translate(55vw,1vw);}
    #dd2{transform:translate(55vw,4vw);}
    #dd3{transform:translate(55vw,7vw);}
    #dd4{transform:translate(55vw,10vw);}
    #dd5{transform:translate(55vw,13vw);}
    #fond{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/ZEhmNvbgDnTZqkZpq-Q8AqQ7Ziw@1152x648.jpg');}
    #dd1:hover ~ #fond{background:url('http://ekladata.com/ggAJMlUq387ErG9ZlzRlVaMMM5c@1152x648.jpg');}
    #dd2:hover ~ #fond{background:url('http://ekladata.com/kgup_VGKoDXGEMwwJ6_h7q53C2o@1152x648.jpg');}
    #dd3:hover ~ #fond{background:url('http://ekladata.com/HhApV1IrOtaiuIR09c_Go-JO_Ag@1152x648.jpg');}
    #dd4:hover ~ #fond{background:url('http://ekladata.com/2LvoZxlOEmLkjfLI3IjkfOL1L-s@1152x648.jpg');}
    #dd5:hover ~ #fond{background:url('http://ekladata.com/W9uFV0p_TH69Srj0xS7q_dGBcuw@1152x648.jpg');}
    --></style>