21 janvier 2009 3 21 /01 /janvier /2009 21:04
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:

<a href="ici coller l'adresse de votre page web" target="_blank"><img src="ici collez l'adresse de votre image" alt=""></a>

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 !


Partager cet article

Repost 0

commentaires

Rapha 11/10/2013 17:12

MERCI!

Lolocreep 21/01/2009 23:59

pfoualala dur pour mon petit cerveau ^^En tous cas bravo pour cette explication