Html 表格中的文本在图像上方哪个悬停？

我创建了一个表格，在每个单元格中，都有一个具有“悬停”效果的图像。图像包含图形+文本（硬打印）

一切都很好，直到我的网站的推广人告诉我把“真实”的文字放在JPG上，并从图片中删除打印的文字

我试过好几种方法，但都找不到。也许我弄错了“位置”

代码如下：

HTML

我试着把文本放在a之前，a之后，但无论我尝试什么都不起作用。或者单元格完全失去位置，或者文本被隐藏（或其他内容）

---

对于悬停“效果”，我使用135x68图像。它起作用了。

在之前和之后使用

不会生成“真实”文本（SEO方面）。你需要在标记中放置文本。我改进了我的帖子，我的意思是默认情况下隐藏的！
<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>

#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;
}