• Diaporama D

    Montage en 800x600px; au clic, avec 8 images en 400x600px, bordées de 2px blanc; on peut, bien entendu, mettre 4 images en 800x600px sans bordure.

    Au
    CLIC

    0

    1

    2

    3

    code
    <div id="mont">
    <div id="ancres"><a id="lien0" class="ancre"></a><a id="lien1" class="ancre"></a><a id="lien2" class="ancre"></a><a id="lien3" class="ancre"></a>
    <p id="cc">Au<br />CLIC</p>
    <p id="av0"><a href="#lien0"><span style="color: yellow;">0</span></a></p>
    <p id="av1"><a href="#lien1"><span style="color: yellow;">1</span></a></p>
    <p id="av2"><a href="#lien2"><span style="color: yellow;">2</span></a></p>
    <p id="av3"><a href="#lien3"><span style="color: yellow;">3</span></a></p>
    <p id="dia"><img style="float: left;" src="http://ekladata.com/hSSTheHEQPYTSvCHladGGJsEHUU/5407.jpg" alt="" /><img style="float: left;" src="http://ekladata.com/PDxqIjfQ6Y66tqzL-5ZsalWdxxg/5409.jpg" alt="" /><img style="float: left;" src="http://ekladata.com/-hZLsF7YGwUUXPpJYW664Duzxfs/5411.jpg" alt="" /><img style="float: left;" src="http://ekladata.com/B9LONTizxuzIZ6bXnYJ3SF12_jI/5413.jpg" alt="" /><img style="float: left;" src="http://ekladata.com/WZXR3-KGuvYPj4xu5-ypw3pOAd0/5416.jpg" alt="" /><img style="float: left;" src="http://ekladata.com/aiI1_6q9PuXgdQUrk0-1S7xSTPA/5417.jpg" alt="" /><img style="float: left;" src="http://ekladata.com/B2ZIZJ3Sbt5FN0hEywS1CsRqLkg/5420.jpg" alt="" /><img style="float: left;" src="http://ekladata.com/Oe3JjNRXpC8BeWN7QRxMzV2mcT8/5425.jpg" alt="" /></p>
    </div>
    </div>

    <style><!--
    #mont{position:relative; width:800px; height:600px; border:4px double white; margin:10px auto; overflow:hidden; }
    #ancres a.ancre{display: none;}
    #cc{position:absolute; z-index:2; width:60px; height:60px; text-align:center;font-size:18pt; transform:translate(730px,20px); color:yellow;}
    #av0{position:absolute; z-index:2; width:60px; height:60px; font-size:30pt; text-shadow:1px 1px black; transform:translate(760px,100px);}
    #av1{position:absolute; z-index:2; width:60px; height:60px; font-size:30pt; text-shadow:1px 1px black; transform:translate(760px,180px);}
    #av2{position:absolute; z-index:2; width:60px; height:60px; font-size:30pt; text-shadow:1px 1px black; transform:translate(760px,260px);}
    #av3{position:absolute; z-index:2; width:60px; height:60px; font-size:30pt; text-shadow:1px 1px black; transform:translate(760px,340px);}
    #dia{position:absolute; z-index:1; transition:all 2s linear; width:3200px; height:600px; border:4px double white; transform:translate(0px,0px);}
    #ancres a#lien0:target ~ #dia{transform:translate(0px,0px);}
    #ancres a#lien1:target ~ #dia{transform:translate(-800px,0px);}
    #ancres a#lien2:target ~ #dia{transform:translate(-1600px,0px);}
    #ancres a#lien3:target ~ #dia{transform:translate(-2400px,0px);}
    --></style>
    ...
    Dans ce montage, les images défilent mais on peut les faire apparaitre au clic, sans défilement: prochaine page !