• Diapo type étagère

    Vous trouvez, sur le net, des exemples, selon ce principe de l'agrandissement d'un élément qui pousse les autres.

    J'ai déjà proposé différents montages (ICIICI et ) mais je voudrais revenir sur ce sujet.

    Un inconvénient de cette disposition est que la largeur de votre montage est tributaire du nombre d'images que vous y placez, même si l'animation est intéressante; exemple: vous publiez 4 images en 800x600px, qui  s'affichent en 100x600px.

    Le survol d'une des images va l'agrandir en 800x600px et conserver les 3 autres en 100x600px ce qui va donner une dimension à votre montage de 1100x600px.

    On peut donc agrandir chaque image au survol et, soit limiter la largeur des 3 autres dans le même temps, soit faire passer l'image agrandie au dessus des 3 autres, avec une animation moins spectaculaire.

     

     

     

     

     

     

     

     

    Voici une proposition d'un montage qui fait 815x600px, avec 4 images de 800x600px.
    Survolez chaque bouton vert pour animer l'image correspondante
    Afin de pouvoir animer les autres éléments, en en survolant un, il faut utiliser des boutons car le survol d'un élément ne peut agir que sur un autre élément qui le suit, celui qui le précède ne peut être animé par ce survol.
    En plaçant les boutons en tête de code, on corrige cet impératif.
    <div id="fond">
    <p id="bg1">&nbsp;</p>
    <p id="bg2">&nbsp;</p>
    <p id="bg3">&nbsp;</p>
    <p id="bg4">&nbsp;</p>
    <p id="mg1">&nbsp;</p>
    <p id="mg2">&nbsp;</p>
    <p id="mg3">&nbsp;</p>
    <p id="mg4">&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #fond{position:relative; margin:10px auto; width:815px; height:600px; border:1px solid black; background:url('http://ekladata.com/SrXheMfSMYh3RAirWZeygeoGYhc/satin6.jpg'); background-size:cover;}
    #bg1{position:absolute; z-index:5; transform:translate(67px,5px); width:40px; height:20px; border:1px solid white; box-shadow:2px 2px black,inset 1px 1px 2px white, inset -1px -1px 2px black; border-radius:5px; background-color:lime;}
    #bg2{position:absolute; z-index:5; transform:translate(239px,5px); width:40px; height:20px; border:1px solid white; box-shadow:2px 2px black,inset 1px 1px 2px white, inset -1px -1px 2px black; border-radius:5px; background-color:lime;}
    #bg3{position:absolute; z-index:5; transform:translate(411px,5px); width:40px; height:20px; border:1px solid white; box-shadow:2px 2px black,inset 1px 1px 2px white, inset -1px -1px 2px black; border-radius:5px; background-color:lime;}
    #bg4{position:absolute; z-index:5; transform:translate(587px,5px); width:40px; height:20px; border:1px solid white; box-shadow:2px 2px black,inset 1px 1px 2px white, inset -1px -1px 2px black; border-radius:5px; background-color:lime;}
    #mg1{position:relative; transition:all 1s linear; float:left; width:170px; height:596px; border:2px solid white; background:url('http://ekladata.com/zW-nJEP5Hl3t0jAJDRZ4RDO-9QI/DSCN6257.jpg');}
    #mg2{position:relative; transition:all 1s linear; float:left; width:170px; height:596px; border:2px solid white; background:url('http://ekladata.com/WJoZtxrFDdwvdW0hVXgrqqV16xc/DSCN6258.jpg');}
    #mg3{position:relative; transition:all 1s linear; float:left; width:170px; height:596px; border:2px solid white; background:url('http://ekladata.com/UfErj-neEaHObGjCiayc32IMdsk/DSCN6260.jpg');}
    #mg4{position:relative; transition:all 1s linear; float:left; width:170px; height:596px; border:2px solid white; background:url('http://ekladata.com/OgHCSDGOafWHroljt4JEZ2d3KbA/DSCN6261.jpg');}

    #bg1:hover ~ #mg1{width:800px; height:600px; border:0px;}
    #bg1:hover ~ #mg2,#bg1:hover ~ #mg3,#bg1:hover ~ #mg4{width:5px; border:0px;}
    #bg2:hover ~ #mg2{width:800px; height:600px; border:0px;}
    #bg2:hover ~ #mg1,#bg2:hover ~ #mg3,#bg2:hover ~ #mg4{width:5px; border:0px;}
    #bg3:hover ~ #mg3{width:800px; height:600px; border:0px;}
    #bg3:hover ~ #mg1, #bg3:hover ~ #mg2, #bg3:hover ~ #mg4{width:5px; border:0px;}
    #bg4:hover ~ #mg4{width:800px; height:600px; border:0px;}
    #bg4:hover ~ #mg1, #bg4:hover ~ #mg2,#bg4:hover ~ #mg3{width:5px; border:0px;}
    --></style>


    Le survol d'un bouton, agrandit l'image correspondante et réduit la largeur des autres.