• Diapo 800x600 gif

    Nous pouvons placer des images animées dans un diaporama au clic, au milieu d'images fixes; elles sont placées en fond de "input" et de préférence en seconde moitié de diaporama, de façon à leur laisser le temps d'être transférées.

    Le site de conversion de vidéo en gif fournit, par défaut, un gif en 690x388px, en fonction de mes vidéos en 1920x1080px.

    Je dimensionne ces gif en 800x450px, en les centrant verticalement.

    <div id="mg"><input id="mga" type="text" value="CLIC" /><input id="mgb" type="text" /><input id="mgc" type="text" /><input id="mgd" type="text" /><input id="mge" type="text" /><input id="mgf" type="text" /><input id="mgg" type="text" /><input id="mgh" type="text" /></div>

    <style><!--
    #mg{width:800px; height:600px; margin:0px auto; border:4px ridge grey;}
    #mga{position:absolute; z-index:5;width:800px; height:600px; background:url(http://ekladata.com/28ve5_D0_giI1cJHhw80rEMEbAI/creambg.jpg); text-align:center; font-size:50pt; color:white !important; text-shadow:2px 2px black; box-sizing:border-box; border:none;}
    #mgb{position:absolute; z-index:5;transform:translate(400px,300px); width:0px; height:0px; transition:all 1s linear; background:url(http://ekladata.com/EPRf1YRj8qyXWr12_Q5riOmW7NY.jpg); background-size:cover; border:none;}
    #mgc{position:absolute; z-index:1; transform:translate(400px,300px); width:0px; height:0px; transition:all 1s linear; background:url(http://ekladata.com/zV46o_OWqpnDlm0E9h8a2bxAcxk.jpg); background-size:cover; border:none;}
    #mgd{position:absolute; z-index:1; transform:translate(400px,300px); width:0px; height:0px; transition:all 1s linear; background:url(http://ekladata.com/yj6Iet2q2UzbJ6MgzJRDVIbo5gY.jpg); background-size:cover; border:none;}
    #mge{position:absolute; z-index:1; transform:translate(400px,300px); width:0px; height:0px; transition:all 1s linear; background:url(http://ekladata.com/neCqWhkfvO86HNT5NtPGEoh-_g0.jpg); background-size:cover; border:none;}
    #mgf{position:absolute; z-index:1; transform:translate(400px,300px); width:0px; height:0px; transition:all 1s linear; background:url(http://ekladata.com/oMFjVChJdIbrO7YChlp-kDejcPc.gif) no-repeat; background-size:800px 450px; background-position:center center; border:none;}
    #mgg{position:absolute; z-index:1; transform:translate(400px,300px); width:0px; height:0px; transition:all 1s linear; background:url(http://ekladata.com/TStePbv4vqyJrD_rCKVrpbcUhNc.jpg); background-size:cover; border:none;}
    #mgh{position:absolute; z-index:1; transform:translate(400px,300px); width:0px; height:0px; transition:all 1s linear; background:url(http://ekladata.com/08IElG755ih09rdsf_ym4HcBc2o.gif)no-repeat; background-size:800px 450px; background-position:center center; border:none;}
    #mga:focus ~ #mgb, #mgb:focus ~ #mgc, #mgc:focus ~ #mgd, #mgd:focus ~ #mge, #mge:focus ~ #mgf, #mgf:focus ~ #mgg, #mgg:focus ~ #mgh{z-index:10; width:800px; height:600px; transform:translate(0px,0px);}
    --></style>