• Images verticales

    Une variante de ce que j'ai déjà proposé au survol; ici, il faut cliquer sur les boutons pour changer les images, avec retour par un clic hors bouton.

    Images de 338x600px; montage:800x600px; code sur demande car mes dimensions limitent l'emploi pour des photos au rapport 4/3 ou alors avec un montage de 1000x600px.

                           

    <div id="val"><input id="v1" class="bt" type="text" value="1" /> <input id="v2" class="bt" type="text" value="2" /> <input id="v3" class="bt" type="text" value="3" /> <input id="v4" class="bt" type="text" value="4" /> <input id="v5" class="bt" type="text" value="5" /> <span id="g0a">&nbsp;</span> <span id="g0b">&nbsp;</span> <span id="g1a">&nbsp;</span> <span id="g1b">&nbsp;</span> <span id="g2a">&nbsp;</span> <span id="g2b">&nbsp;</span> <span id="g3a">&nbsp;</span> <span id="g3b">&nbsp;</span> <span id="g4a">&nbsp;</span> <span id="g4b">&nbsp;</span> <span id="g5a">&nbsp;</span> <span id="g5b">&nbsp;</span></div>

    <style><!--
    #val{position:relative; width:800px; height:600px; margin:5px auto;}
    .bt{width:40px; height:40px; border-radius:50%; border:1px solid black; background:yellow; box-shadow:inset 3px 3px 6px white, inset -3px -3px 6px black; text-align:center; font-size:14pt; color:green; text-shadow:1px 1px black;}
    .bt:focus{background:green; color: yellow;}
    #g0a{position:absolute; z-index:1; width:338px; height:600px; transform:translate(0px,0px); background:url(http://ekladata.com/EsRdjtnYls7DdGyWxwxLyNz-Iu0/1106.jpg);}
    #g0b{position:absolute; z-index:1; width:338px; height:600px; transform:translate(462px,0px); background:url(http://ekladata.com/NHJhAV_79iPwqCwE7faK8uo3-QQ/1149.jpg);}
    #v1{position:absolute; z-index:5; transform:translate(382px,25px);}
    #v2{position:absolute; z-index:5; transform:translate(382px,100px);}
    #v3{position:absolute; z-index:5; transform:translate(382px,175px);}
    #v4{position:absolute; z-index:5; transform:translate(382px,250px);}
    #v5{position:absolute; z-index:5; transform:translate(382px,325px);}
    #g1a{position:absolute; z-index:5; width:0px; height:300px; transform:translate(169px,200px) perspective(200px) rotatey(90deg); background:url(http://ekladata.com/d_KXMXtCJC-sK5t9mybwLU9Tp9o/1151.jpg); background-size:cover; transition:all 1s linear;}
    #g1b{position:absolute; z-index:5; width:0px; height:200px; transform:translate(631px,200px) perspective(200px) rotatey(180deg); background:url(http://ekladata.com/Oj-tDLFV23BMwhj_nk-O408c35M/1152.jpg); background-size:cover; transition:all 1s linear;}
    #g2a{position:absolute; z-index:5; width:0px; height:200px; transform:translate(169px,200px) perspective(200px) rotatey(90deg); background:url(http://ekladata.com/_MjJ5Zrc8cjMtL6JnL579TS9XRM/1164.jpg); background-size:cover; transition:all 1s linear;}
    #g2b{position:absolute; z-index:5; width:0px; height:200px; transform:translate(631px,200px) perspective(200px) rotatey(180deg); background:url(http://ekladata.com/qJGbvkX8R-nPZlOIq7YeU3SdO9c/1170.jpg); background-size:cover; transition:all 1s linear;}
    #g3a{position:absolute; z-index:5; width:0px; height:200px; transform:translate(169px,200px) perspective(200px) rotatey(90deg); background:url(http://ekladata.com/6ZHY7KbULPov0Vkzw45PB8x6lzQ/1172.jpg); background-size:cover; transition:all 1s linear;}
    #g3b{position:absolute; z-index:5; width:0px; height:200px; transform:translate(631px,200px) perspective(200px) rotatey(180deg); background:url(http://ekladata.com/qqghTeSnHemBPunGfEOhY5H06Ak/1175.jpg); background-size:cover; transition:all 1s linear;}
    #g4a{position:absolute; z-index:5; width:0px; height:200px; transform:translate(169px,200px) perspective(200px) rotatey(90deg); background:url(http://ekladata.com/3UOfk2cJ0fGmUFA-Y-kJ4dX1uLw/1194.jpg); background-size:cover; transition:all 1s linear;}
    #g4b{position:absolute; z-index:5; width:0px; height:200px; transform:translate(631px,200px) perspective(200px) rotatey(180deg); background:url(http://ekladata.com/MYh4vpyHyndVy2w4JCx8lApl0tM/1196.jpg); background-size:cover; transition:all 1s linear;}
    #g5a{position:absolute; z-index:5; width:0px; height:200px; transform:translate(169px,200px) perspective(200px) rotatey(90deg); background:url(http://ekladata.com/8AbPOeBs4SjspSDktwJtrs4qDXo/1200.jpg); background-size:cover; transition:all 1s linear;}
    #g5b{position:absolute; z-index:5; width:0px; height:200px; transform:translate(631px,200px) perspective(200px) rotatey(180deg); background:url(http://ekladata.com/6_EvdU8I26bf9FdiNMt8LDOJezs/1206.jpg); background-size:cover; transition:all 1s linear;}
    #v1:focus ~ #g1a, #v2:focus ~ #g2a, #v3:focus ~ #g3a, #v4:focus ~ #g4a, #v5:focus ~ #g5a{transform:translate(0px,0px) perspective(2000px) rotatey(0deg); width:338px; height:600px;}
    #v1:focus ~ #g1b, #v2:focus ~ #g2b, #v3:focus ~ #g3b, #v4:focus ~ #g4b, #v5:focus ~ #g5b{transform:translate(462px,0px) perspective(2000px) rotatey(0deg); width:338px; height:600px;}
    --></style>