• Diapo C

     

    1

    2

    3

    4

    5

     

     

     

     

     

    Code
    <div id="fond">
    <p id="cot">&nbsp;</p>
    <p id="t1">1</p>
    <p id="t2">2</p>
    <p id="t3">3</p>
    <p id="t4">4</p>
    <p id="t5">5</p>
    <p id="ph1">&nbsp;</p>
    <p id="ph2">&nbsp;</p>
    <p id="ph3">&nbsp;</p>
    <p id="ph4">&nbsp;</p>
    <p id="ph5">&nbsp;</p>
    </div>

    <style><!--
    #fond{position:relative; width:800px; height:600px; border:4px ridge white; box-shadow:4px 4px 8px black; margin:10px auto; overflow:hidden; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/01/DSCN2979.JPG');}
    #cot{position:absolute; width:40px; height:600px; transform:translate(760px,0px); background-color:rgba(128,128,128,0.5);}
    #t1{position:absolute; z-index:10; transform:translate(765px,20px); width:30px; height:35px; border:1px solid black; text-align:center; font-size:20pt; color:white; text-shadow:1px 1px black; border-radius:50%; background-color:rgba(255,255,0,0.5);}
    #t2{position:absolute; z-index:10; transform:translate(765px,80px); width:30px; height:35px; border:1px solid black; text-align:center; font-size:20pt; color:white; text-shadow:1px 1px black; border-radius:50%; background-color:rgba(255,255,0,0.5);}
    #t3{position:absolute; z-index:10; transform:translate(765px,140px); width:30px; height:35px; border:1px solid black; text-align:center; font-size:20pt; color:white; text-shadow:1px 1px black; border-radius:50%; background-color:rgba(255,255,0,0.5);}
    #t4{position:absolute; z-index:10; transform:translate(765px,200px); width:30px; height:35px; border:1px solid black; text-align:center; font-size:20pt; color:white; text-shadow:1px 1px black; border-radius:50%; background-color:rgba(255,255,0,0.5);}
    #t5{position:absolute; z-index:10; transform:translate(765px,260px); width:30px; height:35px; border:1px solid black; text-align:center; font-size:20pt; color:white; text-shadow:1px 1px black; border-radius:50%; background-color:rgba(255,255,0,0.5);}
    #ph1{position:absolute; z-index:5; transition:all 2s linear; transform:translate(0px,600px); width:0px; height:0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/01/DSCN2996.JPG'); }
    #ph2{position:absolute; z-index:5; transition:all 2s linear; transform:translate(0px,600px); width:0px; height:0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/01/DSCN3008.JPG'); }
    #ph3{position:absolute; z-index:5; transition:all 2s linear; transform:translate(0px,600px); width:0px; height:0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/01/DSCN3016.JPG'); }
    #ph4{position:absolute; z-index:5; transition:all 2s linear; transform:translate(0px,600px); width:0px; height:0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/01/DSCN3018.JPG'); }
    #ph5{position:absolute; z-index:5; transition:all 2s linear; transform:translate(0px,600px); width:0px; height:0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/01/DSCN3019.JPG'); }
    #t1:hover ~ #ph1{width:800px; height:600px; transform:translate(0px,0px);}
    #t2:hover ~ #ph2{width:800px; height:600px; transform:translate(0px,0px);}
    #t3:hover ~ #ph3{width:800px; height:600px; transform:translate(0px,0px);}
    #t4:hover ~ #ph4{width:800px; height:600px; transform:translate(0px,0px);}
    #t5:hover ~ #ph5{width:800px; height:600px; transform:translate(0px,0px);}
    --></style>
    ...