• ACCUEIL
  • blogger

    Créer des images "cliquables"

    Avec un clic sur une image : que peut-il se passer ?

    1-Comprendre  l'image cliquable avec des notions de code html (facultatif)
    2-Réaliser des images cliquables avec Blogger  (éd 2020)

    1-COMPRENDRE L'IMAGE CLIQUABLE


    1-1 Plusieurs possibilités après un clic sur une image : le clic renvoie


    - vers la même image agrandie :par défaut, avec Blogger
















    -vers vers un lien (page ou site web) avec affichage d'un texte au survol de la souris



    -vers une autre  image 





    1-2 Comprendre le codage classique HTML:

    - Une insertion d'image se réalise ainsi :
     La balise utilisée est   <img> 
     avec  le code minima suivant :

    <img src="http://www.siteweb.com/monimage.jpg" alt="mon texte alternatif"/>

    "src" signifie « source » il faut indiquer l’URL de l’image
    "alt" signifie « texte alternatif » il faut indiquer un texte court décrivant l’image (information utile aux  malvoyants  et pour les moteurs de recherche)

    - Il est possible d'enrichir le code en ajoutant divers éléments comme une URL, une taille (width et height) une bordure avec un style...

    <a href="URL d'un lien lié à l'image" title="titre de l'image">
    <img alt="text alternatif"
    src="URL de l'image"
    width="120"
    height="80"
    border="3"
    style="border:3px solid #337AB7" />
    </a>

    ce qui donne ce code :
    <a href="https://omaha6juin1944.blogspot.com" title="Statue les Braves">
    <img alt="Les Braves Omaha Beach"
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s320/20.jpg"
    width="120"
    height="80"
    border="3"
    style="border:3px solid #337AB7" />
    </a>

    et affiche :

    Les Braves Omaha Beach



    Pour afficher d'abord une image en taille réduite et en cliquant  en taille normale
    (ce que fait automatiquement Blogger)

    <a href="URLimage" title="lien image">
    <img alt="texte alternatif" src="URLimage" width="180" height="120" />
    </a>
      exemple
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s320/20.jpg" title="lien image">
    <img alt="texte alternatif" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s320/20.jpg" width="180" height="120" />
    </a>

    texte alternatif



    2-REALISER E DES IMAGES CLIQUABLES AVEC BLOGGER Ed 2020 

    2-1- le clic renvoie vers la même image agrandie (par défaut avec Blogger)




    Cette image vient d'un de nos blogs, elle est donc stockée dans Google Drive. Le code HTML de Blogger correspondant à son insertion est indiqué ci-dessous. On notera que Blogger a automatiquement indiqué deux liens vers l'image en taille 320px et 1600 px:


    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s1600/20.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" data-original-height="1200" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s320/20.jpg" width="320" />
    </a>
    </div>


    2-2  le clic renvoie vers un site web ou une autre image

    1- Insérer de manière classique l'image dans l'article


    2- récupérer le code en mode html

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s1600/20.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" data-original-height="1200" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s320/20.jpg" width="320" />
    </a>
    </div>


    3-récupérer l'adresse URl de votre image dans la taille souhaitée ici :

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s320/20.jpg


    4-Récupérer l'adresse URL du site web du site qui s'affichera après un clic :
    https://omaha6juin1944.blogspot.com/


    5-utiliser le principe de ce code HTML

    <a href="URL_DU_LIEN_DE_DESTINATION" target="_blank"><img src="URL_DE_L'IMAGE" title="TEXTE_AU_SURVOL_DE_L'IMAGE" /></a>

    qui devient donc

    <a href="https://omaha6juin1944.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s320/20.jpg
    " title="Les Braves à Omaha Beach" /></a>

    6-En mode html: copier coller ce code puis enregistrer
    => passer la souris sur l'image puis cliquer





    2-3- le clic renvoie vers une autre image

    le principe est le même :
    1-Afficher l' "autre" image concernée afin d'en récupérer l'adresse URL



    L'URL
    </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1LX1XW-HhZ14TgbDEU7HI4EQWmIoPqb1ufyRZnLqI3ew2JZWuhtgLS25pdcRkwHbs6Vv6TrC5IfM9jmHMLMbF9bbP7yscOKjDIqUBDUZujcu1UM4oCvSJcUjhaQY0um9DZ3ysh8sF-3o/s1600/10.JPG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1LX1XW-HhZ14TgbDEU7HI4EQWmIoPqb1ufyRZnLqI3ew2JZWuhtgLS25pdcRkwHbs6Vv6TrC5IfM9jmHMLMbF9bbP7yscOKjDIqUBDUZujcu1UM4oCvSJcUjhaQY0um9DZ3ysh8sF-3o/s320/10.JPG" width="320" /></a></div>


    2-recupérer l'URL en taille 320
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1LX1XW-HhZ14TgbDEU7HI4EQWmIoPqb1ufyRZnLqI3ew2JZWuhtgLS25pdcRkwHbs6Vv6TrC5IfM9jmHMLMbF9bbP7yscOKjDIqUBDUZujcu1UM4oCvSJcUjhaQY0um9DZ3ysh8sF-3o/s320/10.JPG"


    3-Dans le code  l'image originale


    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s1600/20.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" data-original-height="1200" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s320/20.jpg" width="320" />
    </a>
    </div>

    remplacer le code de l'image "agrandie" par le code de la nouvelle image

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1LX1XW-HhZ14TgbDEU7HI4EQWmIoPqb1ufyRZnLqI3ew2JZWuhtgLS25pdcRkwHbs6Vv6TrC5IfM9jmHMLMbF9bbP7yscOKjDIqUBDUZujcu1UM4oCvSJcUjhaQY0um9DZ3ysh8sF-3o/s320/10.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" data-original-height="1200" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStC-BK-FmmQNCPrMQQ92829E8sjq-nU7nfe44HMYIEYkm9Sy2ytJ6Wjm6yLAeXCYLRqVZSpcSuNYBCL4TLiIYZ_n2BetKv4hmM_AgcSG0XUF29uscPWAuEg5_B2ARueSHgvfH6hc8qjE/s320/20.jpg" width="320" />
    </a>

    4-Copier coller ce code en mode HTML

    Cliquer sur l'image pour voir
    "Les Braves" illuminés la nuit.