créer un lien image ou un bouton

21.01.2009

Comment créer un lien/image ou plus couramment appelé un bouton ?
(comment créer une image qui, lorsque que l'on clique dessus, renvoie sur une pages web ?)

Un lien image c'est quoi ? et bien c'est ça:

(cliquez dessus)

vous avez sûrement déjà vu ce genre de bouton dans les catégories "liens" ou "patenaires" sur les sites, blog ou forums

Mais la méthode que je vais vous montrer s'adapte à n'importe qu'elle images (de toutes tailles)

Comment faire?

Pas besoin d'être un Geek pour y arriver, c'est tout simple ;)

1) il vous faut une adresse de l'image voulue

pour obtenir une adresse il suffit d'aller sur un hebergeur d'image tel que imageshack (le plus simple), Servimg, Photobucket ou encore Flickr.

Une fois sur l'un des hebergeurs, vous devez Uploader votre image qui doit être au format .jpg , .png ou .gif.

(exemple de imageshack: vous cliquez sur "parcourir", vous choisissez l'image et vous cliquez sur "Host it" qui veut dire héberger en anglais)

Une fois l'image Uploadé vous obtenez l'adresse de votre image ( qui commence par http:// et qui fini par .jpg , .png ou .gif selon le format d'origine de l'image )

(exemple de imageshack: l'adresse de l'image est dans l'en-cadré "Direct")

2) Créer le Lien/image

Pour cela il vous faut
- l'adresse de l'image (voir ci-dessus)
- l'adresse de la page web à liée (votre blog, forum ou site par exemple)

Voila le code HTML d'un lien/image:

C'est simple vous copier (Ctl + C) ce Code ci-dessus et vous le coller (Ctrl + V) dans votre article, module (ou Widget), post ou page web (selon si c'est un blog, site ou forum).

Une fois coller , remplacez les caractères jaune par l'adresse de la page à liée et les caractères bleu par l'adresse de votre image.

- si vous ne comprenez rien: suivez les instructions de ce programme qui créer ensuite le code tout seul -

3) Publier ou ajouter le lien/image

Une fois votre code HTML collé et complété, il vous reste plus que a publié (envoyé). et normalement le code HTML ce transforme en jolie Lien/image.

Si aprés publication (ou envoie), le Code HTML perciste (reste visible - c'est le cas sur Over-blog), Éditez votre article, post, ou autre, copiez, puis, supprimez le code. Ensuite cliquez dans l'éditeur sur "source HTML" et coller votre code dans cette source, puis vous cliquez sur "mise à jour" ou envoyé/publier et enlever et refaite l'essai et le bouton ou lien/image apparaîtra

et voila vous venez de faire un premier pas vers la Geek attitude :0038:
n'hésitez pas à poser des questions ;)

Comment créer un bouton partenaire?

Si vous vous associez en Partenariat avec un site, forum ou un autre blogeur, vous serai sûrement amener à symbolisé le Partenariat par un "bouton" (comme vous l'avez sûrement déjà observé sur de nombreux sites)

Pour créer ce type de bouton , la technique est exactement la même que celle présente ci-dessus. Il faut juste faire attention à l'image choisie:

le format standard des boutons de partenariat est: 100x35 pixel

Astuces: je conseil pour ce type de bouton de faire attention à ce que le texte sois bien lisible, n'hésitez pas à mettre des contours au texte.
Je conseil également de mettre un cadre autour du bouton, pour le valoriser lorsqu'il est dans un ensemble de bouton sur certain site.

Ex: le mien :)

http://img60.imageshack.us/img60/4738/boutonbyrhumer100x35kv7.png

bon blogging !

cliquez ici pour lire la suite