Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Boîte à outils

Ajouter du texte sur un bouton sans logiciel graphique

Au gré de vos navigations, il vous arrive souvent de trouver de très jolis boutons vides que vous aimeriez bien inclure dans votre site en y ajoutant vos propres textes; mais vous n'avez malheureusement pas de logiciel graphique.

Pas de problème, HTML va s'occuper de tout; et voici comment :

En créant un tableau, et en utilisant les boutons comme image de fond des cellules en les positionnant à l'aide de quelques commandes de styles.

Pour cet exercice, nous utiliserons ce bouton sans texte trouvé sur un site proposant des images gratuites : grenadine.net :)

Nous voulons un résultat final qui ressemblera à ceci :

Lien 1
Lien 2
Lien 3
Lien 4

 Et voici le code correspondant, avec les explications:

 

<table border="0" cellpadding="0" cellspacing="4">

<tr>
<td width=
"150" height="55" style="background-image: url('bou0598-10.gif'); background-repeat: no-repeat; background-attachment: fixed;" align="center"><a href="http://www.lien1.com">Lien 1</a></td>
</tr>

<tr>
<td width=
"150" height="55" style="background-image: url('bou0598-10.gif'); background-repeat: no-repeat; background-attachment: fixed" align="center"><a href="http://www.lien2.com">Lien 2</a></td>
</tr>

<tr>
<td width=
"150" height="55" style="background-image: url('bou0598-10.gif'); background-repeat: no-repeat; background-attachment: fixed" align="center"><a href="http://www.lien3.com">Lien 3</a></td>
</tr>

<tr>
<td width=
"150" height="55" style="background-image: url('bou0598-10.gif'); background-repeat: no-repeat; background-attachment: fixed" align="center"><a href="http://www.lien4.com">Lien 4</a></td>
</tr> 

</table>

où...

<td width="150" height="55" fixe les dimensions de la cellule; elles correspondent à la taille exacte du bouton. Si le bouton mesurait 100 pixels de large par 40 pixels de haut, les valeurs seraient <td width="100" height="40"

style="background-image: url('bou0598-10.gif'); indique le nom du bouton à utiliser comme fond de cellule.

background-repeat: no-repeat; indique que l'image ne doit pas se répéter.

background-attachment: fixed" indique que l'image ne doit pas défiler.

Le reste constitue du code HTML classique pour la création d'un lien, avec les attributs de police et de position dans la cellule; dans ce cas-ci, le lien est centré.

L'espacement entre chaque bouton est déterminé par la valeur du cellspacing, dans la balise <table>. Dans cet exemple, cellspacing="4". Pour enlever complètement l'espace entre chaque bouton, appliquer une valeur de 0 ( cellspacing="0").

Voilà ! Si ce n'est pas clair ou si vous avez besoin de précisions, n'hésitez pas à me contacter.

 
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011