• Diapo latéral

     

    Survolez les boutons sur le côté droit.

    1

    2

    3

    4

    5

     

     

     

     

     

    <div id="fd">
    <p id="tx">Survolez les boutons sur le c&ocirc;t&eacute; droit.</p>
    <p id="bt1">1</p>
    <p id="bt2">2</p>
    <p id="bt3">3</p>
    <p id="bt4">4</p>
    <p id="bt5">5</p>
    <p id="im1">&nbsp;</p>
    <p id="im2">&nbsp;</p>
    <p id="im3">&nbsp;</p>
    <p id="im4">&nbsp;</p>
    <p id="im5">&nbsp;</p>
    </div>

    <style><!--
    #fd{position:relative; width:800px; height:600px; border:4px solid grey; overflow:hidden; margin:5px auto 5px 100px; background:url('http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/aout15/30/backn8.jpg');}
    #tx{position:absolute;transform:translate(20px,50px);width:750px; text-align:center; font-size:25pt; color:lime; text-shadow:1px 1px black;}
    #bt1{position:absolute; z-index:2; font-size:30pt; color:coral; text-shadow:1px 1px black; transform:translate(770px,0px);}
    #bt2{position:absolute; z-index:2; font-size:30pt; color:coral; text-shadow:1px 1px black; transform:translate(770px,50px);}
    #bt3{position:absolute; z-index:2; font-size:30pt; color:coral; text-shadow:1px 1px black; transform:translate(770px,100px);}
    #bt4{position:absolute; z-index:2; font-size:30pt; color:coral; text-shadow:1px 1px black; transform:translate(770px,150px);}
    #bt5{position:absolute; z-index:2; font-size:30pt; color:coral; text-shadow:1px 1px black; transform:translate(770px,200px);}
    #im1{position:absolute; transition:all 2s linear;transform:translate(-800px,0px); width:800px; height:600px; background:url('http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/aout15/30/69.jpg');}
    #im2{position:absolute; transition:all 2s linear;transform:translate(-800px,0px); width:800px; height:600px; background:url('http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/aout15/30/71.800x600.jpg');}
    #im3{position:absolute; transition:all 2s linear;transform:translate(-800px,0px); width:800px; height:600px; background:url('http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/aout15/30/71.jpg');}
    #im4{position:absolute; transition:all 2s linear;transform:translate(-800px,0px); width:800px; height:600px; background:url('http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/aout15/30/77.jpg');}
    #im5{position:absolute; transition:all 2s linear;transform:translate(-800px,0px); width:800px; height:600px; background:url('http://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2015/aout15/30/78.jpg');}
    #bt1:hover ~ #im1{transform:translate(0px,0px);}
    #bt2:hover ~ #im2{transform:translate(0px,0px);}
    #bt3:hover ~ #im3{transform:translate(0px,0px);}
    #bt4:hover ~ #im4{transform:translate(0px,0px);}
    #bt5:hover ~ #im5{transform:translate(0px,0px);}
    --></style>
    ...