Il est habituel de faire des liens vers des pages web de son propre blog, ou d'un autre avec des textes.
Un article est consacré ici à la méthode.
Il est aussi possible de faire des liens avec une image.
1. L'intérêt des liens avec image
Le principal intérêt du lien avec image est de se faire remarquer par votre visiteur.
En lecture rapide, l'oeil "accroche" + les images que les textes.
1.1 Un texte qui complète l'image
Par contre, il vous faudra absolument compléter votre image par un petit texte explicatif car une image seule est rarement suffisante pour faire comprendre à votre visiteur vers où il va
être dirigé en cliquant dessus.
Ici, ce badge contient l'adresse internet d'un site. On sait donc qu'on va être redirigé dessus en cliquant.
1.2 Les possibilités pour associer texte et image
* Vous pouvez ajouter une info bulle à votre image ;
cette info bulle expliquera la nature du lien.
* Vous pouvez intégrer un texte très court dans l'image, comme ici
.
Inutile d'en rajouter, on sait tout de suite à quoi va servir ce lien !
* Vous pouvez mettre côte à côte texte et image, ou bien encore l'un en dessous de l'autre.
![]() |
Imprimez cette recette |
2. Faire un lien avec une image
2.1 Enregistrer votre image
Il vous faut tout d'abord faire ou trouver l'image ou la photo qui servira de lien, puis l'enregistrer dans votre administration, ou sur un site d'archivage de données.
2.2 Insertion de l'image dans l'article
Vous insérez votre image, comme d'habitude.
Si vous avez oublié, allez voir ICI comment mettre une
image dans un article.
Vous pouvez noter aussi l'adresse de votre image.
2.3 Code HTML à ajouter pour lier l'image à la page web voulue.
Le code à inscrire est :
<a href="Adresse url de la page vers laquelle vous redirigez le visiteur"><img
height="75" width="100" src="adresse url de l'image" title="info bulle de votre lien" class=" DrteTexte"
style="margin: 0px; border: #000 0px solid;" /></a>
les attributs height et width servent à redéfinir la taille de l'image si besoin
![]() |
![]() |
![]() ![]() |
![]() |