• Diaporama 20

    Survolez chaque vignette.
    7 images en 800x600px, réduites à 120x90px en vignette, qui se chevauchent légèrement, placées à droite du cadre du montage, de 800x600px.

    Code du montage:

    <div id="fd">
    <img id="scr1" src="http://ekladata.com/Fk_ehRO3LU1-M6GyVWXULXYSWzI/DSCN6041.jpg" alt="" />
    <img id="scr2" src="http://ekladata.com/Fw2TkEE-xJqsUEsH7bokPL7ly_Y/DSCN6043.jpg" alt="" />
    <img id="scr3" src="http://ekladata.com/AP27zsOn12r96gpkMFjcFSIQ7FU/DSCN6048.jpg" alt="" />
    <img id="scr4" src="http://ekladata.com/GpXHNIW6BCCOolGNpQKmx8uZJf8/DSCN6049.jpg" alt="" />
    <img id="scr5" src="http://ekladata.com/tUVEM1aSjkpMNEXy11iV16EjKws/DSCN6050.jpg" alt="" />
    <img id="scr6" src="http://ekladata.com/3p3ThcEbDoHtDrFNDIst58BiPeQ/DSCN6051.jpg" alt="" />
    <img id="scr7" src="http://ekladata.com/wzPHfsFxwdLyYuSFlyi6anVUOo4/DSCN6052.jpg" alt="" />
    <p id="comm"><span style="background-color: #ffff00;">Survolez chaque vignette.</span></p>
    </div>
    <style><!--
    #fd{position:relative; width:800px; height:600px; border:2px solid black; margin:10px auto; background:url('http://ekladata.com/UM7-cAwxvQ0lLzFhh1CPReOXYQY/silver4.jpg'); background-size:cover;}
    #comm{position:absolute; transform:translate(100px,100px); text-align:center; width:500px; font-size:14pt;}
    #scr1{position:absolute; transition:all 1s linear; transform:translate(676px,0px);width: 120px; height: 90px; border:2px solid white;}
    #scr2{position:absolute; transition:all 1s linear; transform:translate(676px,85px);width: 120px; height: 90px;border:2px solid white;}
    #scr3{position:absolute; transition:all 1s linear; transform:translate(676px,170px);width: 120px; height: 90px;border:2px solid white;}
    #scr4{position:absolute; transition:all 1s linear; transform:translate(676px,255px);width: 120px; height: 90px;border:2px solid white;}
    #scr5{position:absolute; transition:all 1s linear; transform:translate(676px,340px);width: 120px; height: 90px;border:2px solid white;}
    #scr6{position:absolute; transition:all 1s linear; transform:translate(676px,425px);width: 120px; height: 90px;border:2px solid white;}
    #scr7{position:absolute; transition:all 1s linear; transform:translate(676px,505px);width: 120px; height: 90px;border:2px solid white;}

    #scr1:hover{ position:absolute; z-index:5; width:800px; height:600px; transform:translate(-2px,-2px);}
    #scr2:hover{ position:absolute; z-index:5; width:800px; height:600px; transform:translate(-2px,-2px);}
    #scr3:hover{ position:absolute; z-index:5; width:800px; height:600px; transform:translate(-2px,-2px);}
    #scr4:hover{ position:absolute; z-index:5; width:800px; height:600px; transform:translate(-2px,-2px);}
    #scr5:hover{ position:absolute; z-index:5; width:800px; height:600px; transform:translate(-2px,-2px);}
    #scr6:hover{ position:absolute; z-index:5; width:800px; height:600px; transform:translate(-2px,-2px);}
    #scr7:hover{ position:absolute; z-index:5; width:800px; height:600px; transform:translate(-2px,-2px)}
    --></style>
    ...
    ...