• Exemple 42a

    Une présentation sur le même principe mais avec défilement horizontal, grande image au format automatique Ekla et en pixels, pour ceux qui utilisent cette unité.

    Déplacez les vignettes par le curseur intérieur; clic dessus pour l'agrandir puis clic pour la réduire.


    <div id="scr">
    <a href="http://ekladata.com/-uyfTBOROd8gxw1tynM6C6tNam8.jpg"><input id="ex1" class="ex" type="image" src="http://ekladata.com/-uyfTBOROd8gxw1tynM6C6tNam8@300x169.jpg"></a>
    <a href="http://ekladata.com/1z9Ub5WKfGDIaA71sA_ltnxaRcM.jpg"><input id="ex2" class="ex" type="image" src="http://ekladata.com/1z9Ub5WKfGDIaA71sA_ltnxaRcM@300x169.jpg"></a>
    <a href="http://ekladata.com/0JjEmapB_1BYsTc7Ihk1hNmR3-0.jpg"><input id="ex3" class="ex" type="image" src="http://ekladata.com/0JjEmapB_1BYsTc7Ihk1hNmR3-0@300x169.jpg"></a>
    <a href="http://ekladata.com/4-55S5ZZ0aAlN8EioR4Z89dpWgE.jpg"><input id="ex4" class="ex" type="image" src="http://ekladata.com/4-55S5ZZ0aAlN8EioR4Z89dpWgE@300x169.jpg"></a>
    <a href="http://ekladata.com/GilxdxQoXpDcLtUix6asbbt_qcE.jpg"><input id="ex5" class="ex" type="image" src="http://ekladata.com/GilxdxQoXpDcLtUix6asbbt_qcE@300x169.jpg"></a>
    <a href="http://ekladata.com/tnKssCxsz8x9wwDdiQFUWsnwyig.jpg"><input id="ex6" class="ex" type="image" src="http://ekladata.com/tnKssCxsz8x9wwDdiQFUWsnwyig@300x169.jpg"></a>
    <a href="http://ekladata.com/zcSmmVgKEqrPoD29gIlfUhBcVJc.jpg"><input id="ex7" class="ex" type="image" src="http://ekladata.com/zcSmmVgKEqrPoD29gIlfUhBcVJc@300x169.jpg"></a>
    <a href="http://ekladata.com/LqQT-XxuLIShcbOpO5DvDcJo6Z4.jpg"><input id="ex8" class="ex" type="image" src="http://ekladata.com/LqQT-XxuLIShcbOpO5DvDcJo6Z4@300x169.jpg"></a>
    </div>

    <style><!--
    #scr{width:910px; height:185px;  border:5px solid black;  margin:1vh auto; text-align:left; overflow:auto; white-space: nowrap;}
    .ex{ display:inline-block; width:300px; height:169px;}
    --></style>

     

     

    overflow:auto; fait que le débordement des images ne se voit pas, hors de la dimension imposée.

    white-space:nowrap; fait que les images ne changent pas de ligne à chaque nouvelle image.