• Montage 32

     

     

    Survolez l'image pour l'agrandir.
    Vous pouvez placer une ou des images, positionnées selon votre choix, des images animées ou des vidéos (i frame).
    Quelques exemples dans les autres onglets.

    Ici, mon ciel matinal, le 4 Mai 2018: peu engageant !

    Il y a déjà un bon moment, j'ai proposé ce genre de montage à onglets; dernièrement, j'ai proposé un montage, texte et image, qui a semblé intéresser...
    On peut mélanger les deux pour proposer un texte à coté d'image(s) ou autre.

    Le principe est de placer le nombre d'onglets désiré en haut de montage et dessous, des cadres avec les textes et images.
    Au départ, le premier cadre est apparent, en premier plan; Les autres cadres sont en dessous, non apparents; au clic sur un onglet, la page correspondante passe au dessus pour être apparente et son contenu peut être animé.

     

     

    Les tamaris sont beaux, cette année, dans mon jardin.
    Je les ai taillés sévèrement, après la floraison de l'année dernière et éliminé les branches mortes ou anciennes qui montaient trop haut.
    Un peu de goudron sur les coupes des grosses branches et cordes pour éviter qu'ils ne s'avachissent trop et empiètent sur le jardin.

    Les chênes de la montagne poussent sur de la roche mais y trouvent tout de même l'énergie nécessaire.
    Leurs racines retiennent les coteaux où le gel et la pluie détachent des pierres ... sur la route !

    Survolez les photos.

     

     

     

    Les herbes:
    Certains les mangent,
    d'autres les fument !

    Survol des images.

     

    Survol

    Chaque onglet étant une page indépendante et presque un article indépendant, la construction est assez longue mais n'en retenez que le principe

    <div style="width: 60vw; height: 35vw; border: 0.1vh solid black; background: white; margin: 1vh auto;"><input id="ong1" class="ong" type="text" value="page 1" /><input id="ong2" class="ong" type="text" value="page 2" /><input id="ong3" class="ong" type="text" value="page 3" /><input id="ong4" class="ong" type="text" value="page 4" /><input id="ong5" class="ong" type="text" value="page 5" /><input id="ong6" class="ong" type="text" value="page 6" />
    <div id="pg1" class="pg">Page 1</div>
    <div id="pg2" class="pg">Page 2</div>
    <div id="pg3" class="pg">Page 3</div>
    <div id="pg4" class="pg">Page 4</div>
    <div id="pg5" class="pg">Page 5</div>
    <div id="pg6" class="pg">Page 6</div>
    </div>
    <style><!--
    .ong{position:absolute; z-index:1; box-sizing:border-box; width:5vw; height:1.25vw; border:0.1vh solid black; text-align:center; line-height:1.25vw; font-size:1vw;}
    #ong1{transform:translate(0vw,0vw);background:#B0C4DE;}
    #ong2{transform:translate(5vw,0vw);background:aqua;}
    #ong3{transform:translate(10vw,0vw);background:#FAEBD7;}
    #ong4{transform:translate(15vw,0vw);background:#5F9EA0;}
    #ong5{transform:translate(20vw,0vw);background:#00FFFF;}
    #ong6{transform:translate(25vw,0vw);background:#8FBC8F;}

    .pg{position:absolute; z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,1.25vw);}
    #pg1{background:#B0C4DE;}
    #pg2{background:aqua; z-index:1;}
    #pg3{background:#FAEBD7; z-index:1;}
    #pg4{background:#5F9EA0; z-index:1;}
    #pg5{background:#00FFFF; z-index:1;}
    #pg6{background:#8FBC8F; z-index:1;}

    #ong2:focus ~ #pg2,#ong3:focus ~ #pg3,#ong4:focus ~ #pg4,#ong5:focus ~ #pg5,#ong6:focus ~ #pg6{z-index:10;}
    --></style>

    Dans chaque Page (1 à 6), vous placez vos images et texte mais pas de lien au clic car le clic ramène à la page 1.