• Diapo 10c

    Le dernier code proposé me paraît modifiable sans trop à se prendre la tête alors, je reviens sur sa construction.

    Le voici pour rappel:

    <div id="fondu">&nbsp;</div>
    <style><!--
    #fondu{position:relative; width:800px; height:450px; margin:30px auto; text-align:left; border:6px ridge white; box-shadow:4px 4px 6px black; animation:fondu 18s ease-in-out infinite both;animation-play-state:running;}
    #fondu:hover{animation-play-state:paused;}
    @keyframes fondu{
    0%{background-image:url('http://ekladata.com/_4_a7I_SOYzlKVYry9Y98cbJl1Y@800x450.jpg');}
    20%{background-image:url('http://ekladata.com/Ds0gwI5glVSdMD9XD0tTKefzY_o@800x450.jpg');}
    40%{background-image:url('http://ekladata.com/IryqRhbvxuFWs7W3uRUMW06T8rg@800x450.jpg');}
    60%{background-image:url('http://ekladata.com/kibulpTYU-PIMLaTRsGzebk28BU@800x450.jpg');}
    80%{background-image:url('http://ekladata.com/PgqRfFBmZF8sKSaDwteu0L6IsFs@800x450.jpg');}
    100%{background-image:url('http://ekladata.com/PgqRfFBmZF8sKSaDwteu0L6IsFs@800x450.jpg');}}
    --></style>

    1/ Il faut savoir copier l'adresse des images hébergées.

    2/ Il faut savoir utiliser l'éditeur de texte de votre PC, pour copier les codes html et adresses et JAMAIS sur une feuille de  traitement de texte (Word, Open Office...).

    3/ Il faut savoir écrire les articles dans le code source (<> ou html) de votre barre d'outils.

    4/ Il faut connaître le ratio de vos images (rapport largeur/hauteur) pour construire votre montage autour de ce ratio.

    **********************

    Pour la rédaction du code lui-même, il faut connaître la largeur de votre zone article pour définir la largeur de votre montage.

    Vous créez le cadre du montage en le décorant à votre goût en écrivant, en partie html de votre code.

    Afin de lui définir les paramètres en lignes CSS, vous devez lui donner un identifiant (un nom) du genre: id="fondu"

    **********************

    Comme vous le voyez dans le code exemple, le cadre est vide (&nbsp;) et les images sont placées en arrière plan (background) et c'est ce fond que nous allons animer.

    Il faut connaître le nombre d'images dans votre montage pour définir le % d'affichage de chacune sachant que le temps que vous allez définir pour le montage sera divisé par le nombre d'images.

    100% divisé par 6, par exemple, donnera 16% pour chacune soit: 0%/ 16%/32%/ 48%/ 64%/ 80%/96%...100%

    Le temps général sera de 6 x 2s = 12s au moins.

    Pour l'animation, j'ai utilisé le code trouvé sur le net; en principe, mon écriture est plutôt, ce qui ne change rien au fonctionnement du montage !

    animation:fondu 18s linear infinite normal;