Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Bote outils

Ajouter du texte sur un bouton sans logiciel graphique

Au gr de vos navigations, il vous arrive souvent de trouver de trs 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 problme, HTML va s'occuper de tout; et voici comment :

En crant 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 rsultat 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 rpter.

background-attachment: fixed" indique que l'image ne doit pas dfiler.

Le reste constitue du code HTML classique pour la cration 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 dtermin par la valeur du cellspacing, dans la balise <table>. Dans cet exemple, cellspacing="4". Pour enlever compltement 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 prcisions, n'hsitez pas me contacter.

  
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011