Faire une image cliquable qui renvoie vers un site ou un message ?
Dans l'absolu, ce n'est pas compliqué :
<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="ADRESSE__DE_L'IMAGE" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>
Si vous avez besoin que je vous décortique l'affaire :
1 - Hébergement de l'image
Il vous faut commencer par choisir l'image qui servira de lien sur votre blog.
Positionner l'image au bon endroit.
Puis dimensionner l'image à la taille désirée.
Une fois tout ceci réalisé vous devez avoir une image telle que celle çi :
Si je regarde ce que j'obtiens par l'onglet HTML, j'ai le résultat suivant :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s1600/boite_outils.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg" width="200" /></a></div>
2 - URL de l'image
Dans ce que j'ai obtenu plus haut ce qui m'intéresse c'est l'adresse précise de l'hébergement de l'image, sa dimension et son nom, ce sont les données suivantes :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s1600/boite_outils.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg" width="200" /></a></div>
Je retiens donc ceci :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg
3 - URL du site de destination
Il me faut trouver l'adresse précise (URL) vers lequel je veux que mon image pointe.
Pour l'exercice, je veux que mon image pointe vers mon blog :
http://mestrucspourblogger.blogspot.com/
4 - Message sur l'image
Je dois réfléchir au message que je veux voir affiché lorsque mes lecteurs survoleront cette image.
Je pense qu'il est souhaitable de leur indiquer l'action offerte et le résultat.
En l'occurence :
Pour accéder à Mes trucs pour Blogger
me semble un bon compromis.
5 - Et voici le résultat
Je reprends ma proposition du début :
<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="ADRESSE__DE_L'IMAGE" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>
et je remplace avec les données précédemment mises de côté.
Ce qui donnera au final :
<a href="http://www.mestrucspourblogger.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg" title="Pour accéder à Mes trucs pour Blogger" /></a>
soit en image cliquable le résultat suivant :
Quelle utilisation pour tout ceci ?
On pense bien évidemment aux colonnes de widget où des affichages peuvent être égayés de cette manière si on veut faire des présentations personnelles sur une extraction de ses libellés par exemple.
On peut penser aussi à des images pour remplacer les titres des menus ou onglets.
A+