マウスが重なったら画像の上に文字を表示する

質問

今までに、画像を背景としてHTMLでその上に文字を表示することは出来たのですがそれだと文字が表示しっぱなしで、JavaScriptを使って画像にマウスが乗ると文字を表示するタイプにすると文字が画像の下に表示されてしまい上手くいきません。
画像にマウスが乗ると文字を画像の上に表示するようにするにはどのようにしたら良いでしょうか？
ちなみに
HTMLで考えたもの
--------------------------------------------------------
<table width="90" border="0" cellspacing="5" cellpadding="5">

<tr>
<td><TABLE border="0" width="90" height="90" background="aikon/M1-アイコン2.gif"><TBODY><TR><TD>
<CENTER><A href="Ｍ１/00.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">みる</font></Font></A><BR>
<A href="Ｍ１/99.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">スライド</font></Font></A></CENTER>
</TD></TR></TBODY></TABLE></td>

<td><TABLE border="0" width="90" height="90" background="aikon/M2-アイコン2.gif"><TBODY><TR><TD>
<CENTER><A href="Ｍ２/00.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">みる</font></Font></A><BR>
<A href="Ｍ２/99.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">スライド</font></Font></A></CENTER>
</TD></TR></TBODY></TABLE></td>
</tr>
--------------------------------------------------------
JavaScriptの場合
--------------------------------------------------------
<script language="javascript">
function pDsp(id){
var pItems=document.getElementsByTagName("P");
for(var i in pItems){
if(pItems[i].className=="groupABC" && pItems[i].id!=id) pItems[i].style.display='none'
}
var obj=document.getElementById(id);
obj.style.display=(obj.style.display=='none')?'':'none';
}
</script>

<table width="90" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><P onmouseover="pDsp('a')"><img src="aikon/M1-アイコン2.gif" width="90" height="90" border="0" /></P></td>
<td><P onmouseover="pDsp('b')"><img src="aikon/M2-アイコン2.gif" width="90" height="90" border="0" /></P></td>
</tr>
<td><P id="a" class="groupABC" style="display:none">
<nobr>
<A href="Ｍ１/00.htm" target="_top"><Font Face="HG創英角ポップ体">みる</Font></A><BR>
<A href="Ｍ１/99.htm" target="_top"><Font Size="2"><Font Face="HG創英角ポップ体">スライド</Font></Font></A></P></td>
</nobr>
<td><P id="b" class="groupABC" style="display:none">
<nobr>
<A href="Ｍ２/00.htm" target="_top"><Font Face="HG創英角ポップ体">みる</Font></A><BR>
<A href="Ｍ２/99.htm" target="_top"><Font Size="2"><Font Face="HG創英角ポップ体">スライド</Font></Font></A></P></td>
</nobr>
</table>

回答No.1

kazumero

JavaScriptの方ですが、
画像の上に表示するなら、画像を指定しているtr要素を下に持ってくるのはいかがでしょうか？

お礼

回答ありがとうございます
その手がありましたか！