• Clip 14

     

    1

    2

    3

    4

    5

    6

    Survolez les boutons.

    Ce montage pour illustrer les différentes possibilités de présentation et d'affichage des images.

    Code de principe pour une image et un bouton.

    <div style="position: relative; width: 800px; height: 600px; margin: 10px auto; border: 4px ridge white; background: url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/patt2.jpg');">
    <p id="fdb">&nbsp;</p>
    <p id="bt1">1</p>
    <p id="dem1"><img class="a1" src="http://ekladata.com/_OPMmW9GDgVK5258EZhFaOZ09dk/6002.jpg" alt="" /><img class="a1" src="http://ekladata.com/_OPMmW9GDgVK5258EZhFaOZ09dk/6002.jpg" alt="" /><img class="a1" src="http://ekladata.com/_OPMmW9GDgVK5258EZhFaOZ09dk/6002.jpg" alt="" /><img class="a1" src="http://ekladata.com/_OPMmW9GDgVK5258EZhFaOZ09dk/6002.jpg" alt="" /></p>
    </div>
    <style><!--
    #fdb{position:absolute; z-index:8; width:40px; height:250px; transform:translate(750px,0px);background-color:rgba(128,128,128,0.5);}
    #bt1{position:absolute; z-index:10; width:30px; height:30px;transform:translate(753px,5px); border:1px solid white; box-shadow:1px 1px black; text-align:center; font-size:15pt; border-radius:50%;}
    #dem1 img:nth-child(1){position:absolute; z-index:1; clip: rect(0px, 200px, 600px, 0px);transition:all 1s linear ; transform-origin:100px 0px; transform: translate(0px,0px)rotateY(90deg) ; opacity:1; }
    #dem1 img:nth-child(2){position:absolute; z-index:1; clip: rect(0px, 400px, 600px, 200px);transition:all 1s linear 0.5s; transform-origin:300px 0px; transform: translate(0px,0px) rotateY(90deg); opacity:0; }
    #dem1 img:nth-child(3){position:absolute; z-index:1;clip: rect(0px, 600px, 600px, 400px);transition:all 1s linear 1s; transform-origin:500px 0px; transform: translate(0px,0px) rotateY(90deg); opacity:0; }
    #dem1 img:nth-child(4){position:absolute; z-index:1;clip: rect(0px, 800px, 600px, 600px);transition:all 1s linear 1.5s; transform-origin:700px 0px; transform: translate(0px,0px) rotateY(90deg); opacity:0; }
    #bt1:hover~#dem1 img.a1{transform:rotateY(0deg); opacity:1; z-index:5;}
    --></style>
    Si vous ajoutez un second bouton (bt2), identifiez le second paragraphe de la seconde image en demo2 (par exemple) et chaque image, en class="a2", par exemple aussi pour permettre au bouton bt2 d'agir sur le second paragraphe et la seconde image, divisée en 4 clip.