• adresse image

    Je crois que certains visiteurs voudraient utiliser les codes que je propose mais qu'ils ne savent pas comment récupérer les adresses de leurs images pour les mettre à la place des miennes dans les codes.

    Je vais essayer d'indiquer une façon qui utilise le moins possible l'ouverture du code source de votre article.

    Tout d'abord, ne faites pas l'erreur que j'ai faite, au début de mes essais: Ne recopiez pas le code ou les adresses sur une feuille de traitement de texte genre Word !

    Vous ne le verrez pas sur votre écran mais un code ou une adresse saisie ainsi ne sera plus lisible dans le code source de votre article.

    Vous devez ouvrir une feuille d'éditeur de texte qui se trouve sous Windows, je crois, dans les accessoires et copier dedans le code.

    *********

    Puisque je parle du code source: cette fenêtre sait lire les codes contrairement à la fenêtre où vous écrivez vos articles; vous l'ouvrez en cliquant sur l'icône <> de la barre d'outils.

    adresse image

    Ce qui vous ouvre une fenêtre comme ça:

    adresse image

    Ce qui est écrit <p></p> peut être conservé ou supprimé: cette ligne provoque un saut de ligne simplement.

    Vous pouvez simplement y copier un code que je propose et ainsi l'afficher, avec mes images.

    Vous écrirez votre code à la place ou à la suite; prenons un exemple:

    <div style="position: relative; width: 1000px; height: 563px; margin: 5px auto; border: 2px solid black; background: url('http://ekladata.com/jcRJDGpC7sv50DmaV4KSuGiRIeM.jpg'); background-size: cover; text-align: left; overflow: hidden;">
    <p id="bs1" class="bs">&nbsp;</p>
    <p id="bs2" class="bs">&nbsp;</p>
    <p id="bs3" class="bs">&nbsp;</p>
    <p id="bs4" class="bs">&nbsp;</p>
    </div>
    <style><!--
    .bs{position:absolute; z-index:1; width:1000px; height:563px; border:6px ridge white; transition:all 1s linear;}
    #bs1{box-sizing:border-box; background:url('http://ekladata.com/pbW5HXGyWcCev4eK2ghL3xZEODY.jpg'); background-size:cover; transform:translate(-450px,-470px) rotate(-45deg)}
    #bs2{box-sizing:border-box; background:url('http://ekladata.com/vk-rXnUJ4yFv59PhcMImh6HBF5c.jpg'); background-size:cover; transform:translate(400px,-520px) rotate(45deg)}
    #bs3{box-sizing:border-box; background:url('http://ekladata.com/DoNdcaH8k09tWZfLc9iEYFk4OXY.jpg'); background-size:cover; transform:translate(400px,480px) rotate(-45deg)}
    #bs4{box-sizing:border-box; background:url('http://ekladata.com/pcKV_72JHC1OX_APkKj76594z8E.jpg'); background-size:cover; transform:translate(-450px,430px) rotate(45deg)}
    #bs1:hover,#bs2:hover,#bs3:hover,#bs4:hover{z-index:5; transform:translate(0px,0px) rotate(0deg);}
    --></style>

    Dans les codes que je propose, mes images sont au ratio 16/9 (largeur 1600px pour hauteur 900px) et leurs adresses figurent en bleu dans mes lignes de code.

    Elles sont sous la forme: http://ekladata.com/jcRJDGpC7sv50DmaV4KSuGiRIeM.jpg

    Comment remplacer mes adresses par les vôtres ?

    Je suppose que beaucoup saisissent leurs images par l'icône "Image" alors, je vais saisir une image de cette façon et la dimensionner en 1000px par 563px.

    adresse image

    J'enregistre mon article sans le publier puis je clique droit, sur cette image pour obtenir la commande: copier l'adresse de l'image que je clique gauche.

    J'ouvre la feuille de code source que j'ai copiée dans une feuille d'éditeur de texte.

    Pour l'image ci-dessus, j'obtiens:

    http://ekladata.com/zlJKSZGTCpemor0RO-3eMMPkY2w@1000x563.jpg

    Si je veux remplacer l'adresse de la première image de mon code par celle ci-dessus, je vais écrire:

    <div style="position: relative; width: 1000px; height: 563px; margin: 5px auto; border: 2px solid black; background: url('http://ekladata.com/jcRJDGpC7sv50DmaV4KSuGiRIeM.jpg'); background-size: cover; text-align: left; overflow: hidden;">

    qui devient avec la nouvelle image:

    <div style="position: relative; width: 1000px; height: 563px; margin: 5px auto; border: 2px solid black; background: url('http://ekladata.com/zlJKSZGTCpemor0RO-3eMMPkY2w@1000x563.jpg'); background-size: cover; text-align: left; overflow: hidden;">

    Si vous avez plusieurs adresses à héberger pour en copier les adresses, vous saisissez vos images, les unes sous les autres, copiez leurs adresses de la façon indiquée et les placez dans le code à la place des miennes.

    Une fois le code modifié, vous pouvez supprimer les images saisies et coller, dans la fenêtre code source (<>) le code modifié et le publier (OK/enregistrer).