html - ホバリングする画像の上にテーブル内のテキスト?

Question

テーブルを作成しました。すべてのセル内に、「ホバー」効果のある画像があります。画像にはグラフィックとテキスト (ハードプリント) が含まれています。

私のサイトのプロモーターが「実際の」テキストをJPGの上に置き、印刷されたテキストを画像から削除するように指示するまで、すべてがうまく機能します。

私はいくつかのことを試しましたが、何かを見つけることができませんでした。「位置」を間違えたのかもしれません。

コードは次のとおりです。

HTML

<table id="tablestyle">
<tr align="center">
    <td><a id="button" href="index.html"></a></td>
    <td><a id="button" href="index.html"></a></td>
    <td><a id="button" href="index.html"></a></td>
    <td><a id="button" href="index.html"></a></td>
    <td><a id="button" href="index.html"></a></td>
    <td><a id="button" href="index.html"></a></td>
</tr>
</table>

そしてCSS

#button {
display: block;
width: 135px;
height: 34px;
background: url('images/navibutton.jpg') 50% bottom;
background-repeat:no-repeat;
text-indent: -99999px;
position: static;
}
#button:hover {
background-position: 0 0;
}
#tablestyle {
margin: auto;
width: 900px;
}

a の前、a の後にテキストを挿入しようとしましたが、何を試してもうまくいきません。または、セルの位置が完全に失われるか、テキストが非表示になります (または他の何か)。

ホバーの「効果」には、135x68 の画像を使用します。それは働いています。