ABC: BLOG & 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 :

"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 :

et affiche :

Pour afficher d'abord une image en taille réduite et en cliquant en taille normale

(ce que fait automatiquement Blogger)

</a>

exemple

</a>

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

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

4-Copier coller ce code en mode HTML

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