• Déroulement et translation

    La première page publiée sur ce sujet s'est perdu dans les méandres de l'internet !
    En survolant les boutons vert, vous ferez apparaitre une image par translation; en survolant les boutons gris, pour la ferez se dérouler.
    L'objectif est de montrer deux façons de faire apparaître une même image, dans les 4 orientations principales mais on peut imaginer de les faire apparaître en biais.
    Le code indiqué sera long mais très répétitif, juste modifié par les positionnements au départ (transform:translate en translation) ou les parties sélectionnées (clip en déroulement).

     

     

     

     

     

     

     

     

    Pour mon exemple, 2 types de boutons, répétés 4 fois et 4 images, répétées 2 fois également, ce qui ne sera pas le cas pour votre montage.

    <div id="mont">
    <p id="bt1"><img style="width: 40px; height: 40px;" src="http://ekladata.com/O0qGEIz3FoegNCEqiAqXoKJihgg/buttons14.gif" alt="" /></p>
    <p id="bt1a"><img style="width: 40px; height: 40px;" src="http://ekladata.com/2gOj3bn88kyPpkN3Kubw9ZICr1s/buttons18.gif" alt="" /></p>
    <p id="bt2"><img style="width: 40px; height: 40px;" src="http://ekladata.com/O0qGEIz3FoegNCEqiAqXoKJihgg/buttons14.gif" alt="" /></p>
    <p id="bt2a"><img style="width: 40px; height: 40px;" src="http://ekladata.com/2gOj3bn88kyPpkN3Kubw9ZICr1s/buttons18.gif" alt="" /></p>
    <p id="bt3"><img style="width: 40px; height: 40px;" src="http://ekladata.com/O0qGEIz3FoegNCEqiAqXoKJihgg/buttons14.gif" alt="" /></p>
    <p id="bt3a"><img style="width: 40px; height: 40px;" src="http://ekladata.com/2gOj3bn88kyPpkN3Kubw9ZICr1s/buttons18.gif" alt="" /></p>
    <p id="bt4"><img style="width: 40px; height: 40px;" src="http://ekladata.com/O0qGEIz3FoegNCEqiAqXoKJihgg/buttons14.gif" alt="" /></p>
    <p id="bt4a"><img style="width: 40px; height: 40px;" src="http://ekladata.com/2gOj3bn88kyPpkN3Kubw9ZICr1s/buttons18.gif" alt="" /></p>
    <p id="ph1">&nbsp;</p>
    <p id="ph1a">&nbsp;</p>
    <p id="ph2">&nbsp;</p>
    <p id="ph2a">&nbsp;</p>
    <p id="ph3">&nbsp;</p>
    <p id="ph3a">&nbsp;</p>
    <p id="ph4">&nbsp;</p>
    <p id="ph4a">&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #mont{ position:relative; margin:10px auto; width:800px; height:600px; background:url('http://ekladata.com/xw13BJHLgj1heuAAQ8R6raRNKZA/DSCN6091.jpg'); border:4px solid white; box-shadow:4px 4px 8px black; overflow:hidden;}
    #bt1{ position:absolute; z-index:5; transform:translate(750px,20px);}
    #bt1a{ position:absolute; z-index:5; transform:translate(750px,60px);}
    #bt2{ position:absolute; z-index:5; transform:translate(750px,120px);}
    #bt2a{ position:absolute; z-index:5; transform:translate(750px,160px);}
    #bt3{ position:absolute; z-index:5; transform:translate(750px,220px);}
    #bt3a{ position:absolute; z-index:5; transform:translate(750px,260px);}
    #bt4{ position:absolute; z-index:5; transform:translate(750px,320px);}
    #bt4a{ position:absolute; z-index:5; transform:translate(750px,360px);}
    #ph1{position:absolute; z-index:1;transition:all 1.5s linear; width:800px; height:600px; transform:translate(-805px,0px); background:url('http://ekladata.com/2TsxoVSX30oK-42ZLZK5IcaGrYQ/DSCN6086.jpg');}
    #ph1a{position:absolute;z-index:1; transition:all 1.5s linear;width:800px; height:600px; transform:translate(0px,0px); background:url('http://ekladata.com/2TsxoVSX30oK-42ZLZK5IcaGrYQ/DSCN6086.jpg'); clip: rect(0px, 0px, 600px, 0px);}
    #ph2{position:absolute; z-index:1;transition:all 1.5s linear; width:800px; height:600px; transform:translate(0px,-605px); background:url('http://ekladata.com/ZgJlM0BrSfJjQYxrnJA3kX-O1gs/DSCN6087.jpg');}
    #ph2a{position:absolute;z-index:1; transition:all 1.5s linear; width:800px; height:600px; transform:translate(0px,0px); background:url('http://ekladata.com/ZgJlM0BrSfJjQYxrnJA3kX-O1gs/DSCN6087.jpg'); clip: rect(0px, 800px, 0px, 0px);}
    #ph3{position:absolute; z-index:1;transition:all 1.5s linear; width:800px; height:600px; transform:translate(805px,0px); background:url('http://ekladata.com/8O52Mrt3A0W1kU7rKi4dLn2aO50/DSCN6088.jpg');}
    #ph3a{position:absolute;z-index:1; transition:all 1.5s linear; width:800px; height:600px; transform:translate(0px,0px); background:url('http://ekladata.com/8O52Mrt3A0W1kU7rKi4dLn2aO50/DSCN6088.jpg'); clip: rect(0px, 800px, 600px, 800px);}
    #ph4{position:absolute; z-index:1;transition:all 1.5s linear; width:800px; height:600px; transform:translate(0px,605px); background:url('http://ekladata.com/AEHdlvWuRTRL2DdM3PBkqG1XZU0/DSCN6090.jpg');}
    #ph4a{position:absolute;z-index:1; transition:all 1.5s linear; width:800px; height:600px; transform:translate(0px,0px); background:url('http://ekladata.com/AEHdlvWuRTRL2DdM3PBkqG1XZU0/DSCN6090.jpg'); clip: rect(600px, 800px, 600px, 0px);}

    #bt1:hover ~ #ph1{transform:translate(0px,0px);}
    #bt1a:hover ~ #ph1a{clip: rect(0px, 800px, 600px, 0px);}
    #bt2:hover ~ #ph2{transform:translate(0px,0px);}
    #bt2a:hover ~ #ph2a{clip: rect(0px, 800px, 600px, 0px);}
    #bt3:hover ~ #ph3{transform:translate(0px,0px);}
    #bt3a:hover ~ #ph3a{clip: rect(0px, 800px, 600px, 0px);}
    #bt4:hover ~ #ph4{transform:translate(0px,0px);}
    #bt4a:hover ~ #ph4a{clip: rect(0px, 800px, 600px, 0px);}
    --></style>


    Les adresses de mes images sont surlignées en jaune; vous les remplacez par les vôtres.
    Les boutons sont positionnés selon votre choix (ici, à droite, en colonne).
    Les images sont: soit positionnées hors du cadre de montage et invisibles (overflow:hidden) et le survol du boutons correspondant les déplace.
    Soit, réduite à une sélection de 0px et agrandies au survol, par une sélection totale (clip:rect();)