• Placer une image flottante dans un article avec un code HTML


    Placer une image (vignette) et l'agrandir par clic Placer une image flottante dans un article avec un code HTML

                                                     Nous travaillerons ensemble pour soutenir le courage là où il y a la peur

    - Choisir l'image désirée. Redimensionner l'image pour ne pas ralentir son agrandissement. Donner une adresse URL à cette image. Il est possible, pour ce faire, d'employer EKLABLOG dans Placer une image flottante dans un article avec un code HTML → Nouvelle galerie. Une fois l'image enregistrée dans la galerie, l'ouvrir puis clic droit sur l'image agrandie (important pour la suite) et "Copier l'adresse de l'image". Tout autre hébergeur d'images peut fournir un URL. On peut aussi
    télécharger cette image avec EKLABLOG dans Placer une image flottante dans un article avec un code HTML → Gérer les fichiers.


    Maintenant copiez ce code et ouvrez un nouvelle page
    Placer une image flottante dans un article avec un code HTML

    <a href="URL image"><img style="margin: 100px 0px 0px 20px;" src="URL image" alt="" width="120" /></a></p>


    - Dans l'article concerné ouvrir "Edition d'un article" et activez l'icone "Code source" Placer une image flottante dans un article avec un code HTML

    - Coller le code à la place du curseur clignotant.
    - Remplacer aux deux endroits URL image par l'URL de l'image de fond désirée (ne pas déborder sur les guillemets). Le premier URL image donnera l'image en grandeur d'origine et le deuxième donnera la vignette insérée.
    - 100 est une valeur variable dans le déplacement vertical (Y) de la vignette à insérer.
    20 est une valeur variable dans le déplacement horizontal (X) de la vignette à insérer.
    - 120 (px) est une valeur variable. A modifier selon la largeur voulue (la hauteur reste proportionnelle) de la vignette à insérer.
    - clic sur OK et Enregistrer sans publier. La vignette doit apparaitre à gauche dans la page de l'article.
    - à ce stade adaptez les valeurs variables désirées directement dans le "Code source" Placer une image flottante dans un article avec un code HTML puis OK et Enregistrer sans publier

      ATTENTION ! les modifications dans le "Code source" doivent êtres précises. Si une lettre ou un symbole est touché à côté la publication sera erronée.

      Pour insérer plusieurs images il suffit de recopier le premier code directement dans le "Code source", de le coller à la suite du premier, du
      second, etc... et de modifier les valeurs variables selon désires.

     Toute cette procédure est réalisable avec ou sans fond d'article. 

     

     

     

    « Les bonnes résolutionsMise à jour du module Tutoriels HTML et CSS »
    Partager via Gmail

    Tags Tags : , , , ,
  • Commentaires

    1
    Mardi 14 Janvier à 09:24

    Suite lecture.

    Tu sais que tu peux positionner un élément par top:100px; et/ou left:100px;

    Dans ce cas, la référence, pour top, est soit le haut ton écran, soit le haut de la div dans laquelle est ton image; idem pour left: référence coté gauche de ton écran ou de la div.

    Si ton élément est en mosition:absolute; la référence sera les bords haut et gauche de ton écran;  si l'élément est en position: relative; la référence sera les cotés haut et gauche de la div le contenant.

    C'est ce que j'utilise lorsque j'affiche des images en 100% (plein écran) au clic sur une vignette ou sur un élément quelconque.

    Il faut faire attention à ce que les lecteurs comprennent bien que le code source (<>) est celui de l'article et non le CSS du blog (Apparence/modifier le thème/CSS) car ils feraient des catastrophes !

    Gilbert

    2
    Mercredi 15 Janvier à 10:14

    woaw mon dieu ça parait fastidieux.. mais bon avec un peu de patience (que j'ai du mal à avoir) on devrait y arriver.. 

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :