• Diaporama A

     

     

     

     

     

     

     

     

     

     

     

    Survolez chaque vignette.

    Prenons la porte !

    Montage en 800x600px, format plébiscité !
    <div id="fd">
    <p id="b1">&nbsp;</p>
    <p id="b2">&nbsp;</p>
    <p id="b3">&nbsp;</p>
    <p id="b4">&nbsp;</p>
    <p id="b5">&nbsp;</p>
    <p id="m1">&nbsp;</p>
    <p id="m2">&nbsp;</p>
    <p id="m3">&nbsp;</p>
    <p id="m4">&nbsp;</p>
    <p id="m5">&nbsp;</p>
    <p id="tx">Survolez chaque vignette.<br /><br />Prenons la porte !</p>
    </div>

    <style><!--
    #fd{position:relative; width:800px; height:600px; border:1px solid black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/leaf-brown.jpg');}
    #tx{position:absolute; width:150px; text-align:center; font-size:20pt; color:coral; text-shadow:1px 1px black; transform:translate(100px,50px);}
    #b1{position:absolute; z-index:5; transform:translate(10px,10px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png'); width:60px; height:60px; border-radius:50%;}
    #b2{position:absolute; z-index:5; transform:translate(10px,100px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png'); width:60px; height:60px; border-radius:50%;}
    #b3{position:absolute; z-index:5; transform:translate(10px,190px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png'); width:60px; height:60px; border-radius:50%;}
    #b4{position:absolute; z-index:5; transform:translate(10px,280px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png'); width:60px; height:60px; border-radius:50%;}
    #b5{position:absolute; z-index:5; transform:translate(10px,370px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png'); width:60px; height:60px; border-radius:50%;}
    #m1{transition:all 1s linear; position:absolute; z-index:2; transform:translate(10px,10px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/DSCN5415.JPG'); width:60px; height:60px; border-radius:50%; border:1px solid black;}
    #m2{transition:all 1s linear; position:absolute; z-index:2; transform:translate(10px,100px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/DSCN5432.JPG'); width:60px; height:60px; border-radius:50%; border:1px solid black;}
    #m3{transition:all 1s linear; position:absolute; z-index:2; transform:translate(10px,190px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/DSCN5439.JPG'); width:60px; height:60px; border-radius:50%; border:1px solid black;}
    #m4{transition:all 1s linear; position:absolute; z-index:2; transform:translate(10px,280px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/DSCN5441.JPG'); width:60px; height:60px; border-radius:50%; border:1px solid black;}
    #m5{transition:all 1s linear; position:absolute; z-index:2; transform:translate(10px,370px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/DSCN5448.JPG'); width:60px; height:60px; border-radius:50%; border:1px solid black;}
    #b1:hover ~ #m1{transform:translate(300px,0px); width:450px; height:600px; border-radius:0%;}
    #b2:hover ~ #m2{transform:translate(300px,0px); width:450px; height:600px; border-radius:0%;}
    #b3:hover ~ #m3{transform:translate(300px,0px); width:450px; height:600px; border-radius:0%;}
    #b4:hover ~ #m4{transform:translate(300px,0px); width:450px; height:600px; border-radius:0%;}
    #b5:hover ~ #m5{transform:translate(300px,0px); width:450px; height:600px; border-radius:0%;}
    --></style>
    ...
    ...