• une présentation

    Mes exemples sont toujours en mode adaptatif, pour s'afficher correctement sur le média utilisé pour le visionner mais vous pouvez remplacer mes dimensions adaptative (vw/vh) par des valeurs fixes (px).

    Les images sont ici placées à gauche mais on peut les positionner où on le souhaite et même entre 2 paragraphes textes.

    Leur dimension est à ajuster selon votre page; Survolez chacune pour l'afficher au dessus du texte.



    La pêche
    Un gars est en train de pêcher tranquillement au bord de l’eau. Lorsqu’il sent la présence de quelqu’un derrière lui. Il se retourne et voit un petit vieux qui lui dit :
    - Alors, on pêche ?
    - Ben oui, vous voyez, ça me détend un peu...
    Et le petit vieux fait demi-tour et s’éloigne. Au bout d’un moment il entend à nouveau derrière lui :
    - Alors, on pêche ? (Toujours le même petit vieux)
    - Ben oui, ça me change du stress de la vie parisienne vous voyez...
    Et le petit vieux fait demi-tour et s’éloigne.
    Un moment plus tard le gars entend à nouveau derrière lui le même petit vieux :
    - Alors, on pêche ?
    Là, le pêcheur craque :
    - Ecoutez, ça fait trois fois que vous m’importunez, ça commence à bien faire.
    Il plie ses affaires de pêche, enfourche son vélo et attaque la grande côte qui mène au village sur la colline où il est en vacances. Arrivé presque en haut de la côte, alors qu’il est déjà en nage sous l’effort, il se retourne pour voir le chemin parcouru. Et là il aperçoit le petit vieux entrain de lui faire de grands signes.
    - Tiens se dit le gars, c’est curieux, peut-être ai-je oublié quelque chose en bas.
    Dans le doute, il fait demi-tour et redescend la côte qu’il avait eu tant de mal à monter. Arrivé en bas il s’arrête à côté du petit vieux qui lui fait :
    - Alors, on fait du vélo ?

    Cette histoire n'est pas d'hier mais elle me permet d'illustrer cette structure d'article.


    <div style="margin: 0vh 0vw 83vh 10vw;">
    <p style="width: 20vw; height: 83vh; float: left;"><img id="v1" src="http://ekladata.com/LElpbbeAToGxCpZYNRYryW56YQ8.jpg" alt="" /> <img id="v2" src="http://ekladata.com/WdeKP9-7wCZKPhTTHfnCqgyJNiQ.jpg" alt="" /> <img id="v3" src="http://ekladata.com/9NEMMsZymHmVg22BvZvS-BI4FN8.jpg" alt="" /> <img id="v4" src="http://ekladata.com/yGetDy6YcL9jiN4h6YXoQxIcS1U.jpg" alt="" /></p>
    <p style="width: 60vw; height: 80vh; float: left; border: 0.1vw solid black; text-align: center;">le texte</p>
    </div>
    <style><!--
    #v1{position:absolute; z-index:1; width:20vw; height:19vh; transition:all 1s linear; margin:0.7vh 0vw;}
    #v2{position:absolute; z-index:1; width:20vw; height:19vh; transition:all 1s linear; margin:20.7vh 0vw;}
    #v3{position:absolute; z-index:1; width:20vw; height:19vh; transition:all 1s linear; margin:40.7vh 0vw;}
    #v4{position:absolute; z-index:1; width:20vw; height:19vh; transition:all 1s linear; margin:60.7vh 0vw;}
    #v1:hover, #v2:hover, #v3:hover,#v4:hover{position:absolute;z-index:5; width:80vw; height:80vh; margin:0vh 0vw; }
    --></style>