|
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 :
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.
|
