• Diapo 5

    Un type de diapo en hommage à Michal, qui nous a initiés aux codes HTML avant les codes CSS et dont je reprends le code ici; maintenant, je l'écrirais autrement.

    Clic sur chaque vignette pour changer la grande image; déplacez les vignettes en survolant leur paragraphe pour faire apparaître le curseur de déplacement latéral.

    Images au ratio 4/3 en 800x600px. Les images sont dimensionnées par @800x600 et @160x120.  Chaque vignette commande la même image en 800x600px.


    <div style="position: relative; margin: 10px auto; width: 800px; height: 600px; border: ridge 5px white; text-align: center;"><img id="ny" src="http://ekladata.com/VIIOyOPKjITjSlQhN4g2JXN1L00@800x600.jpg" alt="" /></div>
    <div style="position: relative; margin: 0px auto; width: 800px; height: 135px; border: ridge 5px white; background: white; overflow: auto; white-space: nowrap;">

    <img onclick="ny.src='http://ekladata.com/VIIOyOPKjITjSlQhN4g2JXN1L00@800x600.jpg'" src="http://ekladata.com/VIIOyOPKjITjSlQhN4g2JXN1L00@160x120.jpg" alt="" />

    <img onclick="ny.src='http://ekladata.com/5uJ00A8azG8O2owaeDcW1RhaeSo@800x600.jpg'" src="http://ekladata.com/5uJ00A8azG8O2owaeDcW1RhaeSo@160x120.jpg" alt="" />

    <img onclick="ny.src='http://ekladata.com/D9gRE8pXsTX6UPD_7xC90zQnq-M@800x600.jpg'" src="http://ekladata.com/D9gRE8pXsTX6UPD_7xC90zQnq-M@160x120.jpg" alt="" />

    <img onclick="ny.src='http://ekladata.com/L6U7i4f-GpN5Qkc_12KamOKtrCY@800x600.jpg'" src="http://ekladata.com/L6U7i4f-GpN5Qkc_12KamOKtrCY@160x120.jpg" alt="" />

    <img onclick="ny.src='http://ekladata.com/RAoRkm5G0TwVeIpG1kAxVAHgamE@800x600.jpg'" src="http://ekladata.com/RAoRkm5G0TwVeIpG1kAxVAHgamE@160x120.jpg" alt="" />

    <img onclick="ny.src='http://ekladata.com/_qL9HcZsgWQ9BWB-HGQG8UVfRI8@800x600.jpg'" src="http://ekladata.com/_qL9HcZsgWQ9BWB-HGQG8UVfRI8@160x120.jpg" alt="" />

    <img onclick="ny.src='http://ekladata.com/ySLhxgBGBcDk2bA07rwrg7dvHYI@800x600.jpg'" src="http://ekladata.com/ySLhxgBGBcDk2bA07rwrg7dvHYI@160x120.jpg" alt="" />

    <img onclick="ny.src='http://ekladata.com/5ETlu51L6lHC1AJTmu_s0dCRNwc@800x600.jpg'" src="http://ekladata.com/5ETlu51L6lHC1AJTmu_s0dCRNwc@160x120.jpg" alt="" />

    </div>