Faire un lien avec une image

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

---

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Comments

[Mély]

Merci beaucoup :)

[visit us]

Sincere thanks form my part for sharing us with the tutorial of the same. I am very much convinced by the matter that you have blogged here. It is really a prasie worthy thing. Keep updating this post

[Alissa Ferry]

Je suis peut être idiote, mais qu'est ce que ça veut dire "enregistrez l'image dans votre administration" ? Et pouvez-vous me donner un exemple de "site d'archivage de données" car j'aimerais
créer des widgets de réseaux sociaux sur mon blog, mais je dois pour cela poster mes images de widgets sur internet, et je ne sais pas où les poster... ça ne marche pas sur google+ ... Merci de
m'aider !

[Aurelie]

Archive-host.com pour l'archivage, version gratuite. pour les images, vous pouvez les enregistrer la_bas, ou chez votre hébergeur de blog (images)

[xx-chuppa-xx]

Bonjour,


J'ai des partenariats depuis peu et je voudrait mettre les bannières avec des liens qui mène vers les boutiques dans mes modules (sur le coté) mais même en suivant votre méthode je n'y arrive pas
:/


Pouvez-vous m'aider?!


Merci

[polly]

bonjour,


 


j'avais un ancien blog que j'ai supprimé il y a quelques mois. J'ai créé un nouveau blog mais impossible de faire quoi que ce soit! Je peux juste publier en flash. Je ne connais rien à cette
nouvelle formule, mais apparemment rien ne veut fonctionner.


Si quelqu'un a des astuces pour qu'il puisse enfin démarrer!


merci.

[Aurelie]

Si vous etes chez OB, en mode confiance, le flash ou le script sont interdits...

[muriel]

Je voulais dire l'info bulle de mon lien. Sur l'image doit s'inscrire le titre de la page où on veut rediriger le visiteur, non?...par exemple "livre d'or"? Mureil

[Aurelie]

C'est pas obligé mais c'est bien, en effet, surtout si l'image n'est aps assez parlante.


Bref, il suffit d rajouter un attribut "title" à ton image, comme dans cette exemple pour une photo.

[muriel]

Bonjour,


Je viens d'appliquer votre méthode pour faire un lien avec une image. J'ai bien tout tapé et pourtant ,même si l'image avec le lien apparait; l'info-elle-n'apparait pas dedans. Pourquoi?


Merci d'avance pour votre réponse.

[Aurelie]

Quelle info ???

[oriental-cuisine]

Bonjour je suis tomber sur votre blog en recherchant justement comment inserer des liens dans une image et je n'arrive toujours pas à en inserer plusieurs.


Si vous ne comprenez pas j'essaye en quelques sortes de faire exactement comme dans ce blog (qui m'enverrai sur une page de mon blog)


Je voudrais des reponses très rapide !


Merci d'avance!

[Aurelie]

Vous ne pouvez faire qu'1 seul lien par image, le problème est peut-etre là...


Meme si il semble n'y avoir qu'une image, il y en a plusieurs cote à cote pour mettre 1 lien par image

[Muriel]

Bonsoir,


Un grand merci pour l'astuce...Je viens d'essayer   et ça marche ...youpie !


Bonne soirée.  Muriel

[lyonphoto]

bonjour


en tapant un mot clé je suis tomber sur ton blog il y a quelques jours ...


aujourd'hui je suis passer faire un tétris et j'ai porter le record de 15000 a 36368


dommage que l'ont ne puisse pas mettre le nom de celui qui bat le record ...


allez les blogueurs score a battre !


je repasserais car ce blog est très bien pour les astuces de blog


 


un grand MERCI a son propriétaire ;)