• Construire son montage 1

    Même en sachant que bien peu ont le temps et le désir pour réaliser des montages par codes html, je voudrais reprendre le flambeau de ceux qui m'ont fait apprécier ce type de réalisations (Michal, Jean-Phi et les sites de vulgarisation).

    N'ayant aucune compétence dans ce domaine (j'espère, dans d'autres, tout de même !), j'ai voulu apprendre et petit à petit, on se sent plus à l'aise avec ces codes, ce qui permet d'adapter ceux que l'on trouve sur le net et de personnaliser les siens.

    Préambule:

    - Il faut savoir que ces lignes de code sont à écrire dans une feuille de bloc-notes et surtout pas sur une page de traitement de texte, dont le codage diffère et le rend illisible à la publication.

    - Il faut savoir dimensionner ses images, les héberger et récupérer leurs adresses.


    Je vous propose un diaporama du type que vous trouverez ici, mais au format d'images en 800x600px.

    Nous allons détailler la construction du cadre, de la position des différents éléments la façon à ce que vous puissiez personnaliser un tels montages selon votre goût.

    Tout d'abord, votre montage devra tenir compte de la largeur de votre page de blog et la dimension classique de 800x600px, au rapport 4/3 pourra être modifiée facilement. La structure sera un cadre, dans lequel seront affichées les images et, par dessus, un paragraphe de commentaire et un pour les vignettes ou repères de choix.

    image 1

    Commentaire 1

    vignette 1

    Code de la structure de principe:
    <div style="width: 800px; height: 600px; border: 1px solid black;">
    <p id="im1">image 1</p>
    <p id="comm1">Commentaire 1</p>
    <p id="vig1">vignette 1</p>
    </div>
    <style><!--
    #im1{position:absolute; z-index:1; transform:translate(0px,0px); width:800px; height:600px; background-color:green; font-size:12pt; text-align:center;}
    #comm1{position:absolute; z-index:2; transform:translate(0px,540px); width:800px; height:30px; background-color:lime; font-size:12pt; text-align:center;}
    #vig1{position:absolute; z-index:3; transform:translate(0px,570px); width:800px; height:30px; background-color:yellow; font-size:12pt; text-align:center;}
    --></style>

    Le cadre du montage contient une image, son commentaire et sa vignette.
    Nous ajouterons d'autres images, d'autres commentaires et d'autres vignettes que nous afficherons selon nos choix, soit par changement d'opacité, de forme ou par translation.

    Nous allons dimensionner nos images en 800x600px, les héberger et copier leurs adresses sur une feuille de bloc-notes, en commençant par simplement un image fixe, pour l'exemple, sans changement sur la vignette.

    Commentaire 1

    vignette 1

    Code
    <div style="width: 800px; height: 600px; border: 1px solid black; ">
    <p id="im2"><img src="http://ekladata.com/EM-Z-XmrffYH4EqCZh2hm3U_ddM/5809.jpg" alt="" /></p>
    <p id="comm2">Commentaire 1</p>
    <p id="vig2">vignette 1</p>
    </div>
    <style><!--
    #im2{position:absolute; z-index:1; transform:translate(0px,0px); width:800px; height:600px;}
    #comm2{position:absolute; z-index:2; transform:translate(0px,540px); width:800px; height:30px; background-color:rgba(0,128,0,0.5); font-size:12pt; text-align:center;}
    #vig2{position:absolute; z-index:3; transform:translate(0px,570px); width:800px; height:30px; background-color:rgba(255,255,0,0.5); font-size:12pt; text-align:center;}
    --></style>
    ...
    La différence est dans l'image en  "im2" et la semi-transparence de la couleur de fond de comm2 et de vig 2 

    Je vous propose d'en rester là pour ce premier chapitre; dans le second, nous regarderons comment afficher une seconde image au clic sur une vignette 2.