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

今までに、画像を背景として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.3 ベストアンサー 回答者： leap_day 回答日時： 2008/01/17 01:47

こんにちは

こういうことですか？

<style type="text/css"><!--
.ico {
width:90px;
height:90px;
float:left;
text-align:center;
margin:5px;
}

#icon1 {
background-image:url("aikon/M1-アイコン2.gif");
}

#text1 {
display:none;
}

#text1 a {
color:white;
font-family:HG創英角ポップ体;
}

#icon2 {
background-image:url("aikon/M2-アイコン2.gif");
}

#text2 {
display:none;
}

#text2 a {
color:white;
font-family:HG創英角ポップ体;
}

--></style>

<script type="text/javascript"><!--
function vDsp(n) {
document.getElementById(n).style.display = "block";
}
function hDsp(n) {
document.getElementById(n).style.display = "none";
}
//--></script>


<div id="icon1" class="ico" onMouseover="vDsp('text1')" onMouseout="hDsp('text1')">
<span id="text1">
<a href="Ｍ１/00.htm" target="_top">みる</a><br>
<a href="Ｍ１/99.htm" target="_top">スライド</a>
</span>
</div>
<div id="icon2" class="ico" onMouseover="vDsp('text2')" onMouseout="hDsp('text2')">
<span id="text2">
<a href="Ｍ２/00.htm" target="_top">みる</a><br>
<a href="Ｍ２/99.htm" target="_top">スライド</a>
</span>
</div>
<div style="clear:both;"></div>

この回答へのお礼

回答ありがとうございます。
まさにこれです。
本当にありがとうございました

お礼日時：2008/02/19 01:43

No.2 回答者： redfox63 回答日時： 2008/01/17 00:22

画像は tdタグのbackguroundで指定しおいて

そのtdタグの onmouseoverとonmouseoutで表示/非表示を制御すれば良いのではないかと思います

<table>
　　<tr>
　　　　<td onmouseover="pDisp('a1','on');" onmouseout="pDisp('a1','off');" background="aikon/M1-アイコン2.gif">
　　　　　　<!-- このテーブルの表示/非表示を制御する -->
　　　　　　<table id="a1" style="display:none">
　　　　　　　　<tr>
　　　　　　　　　　<td>みる</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td>スライド</td>
　　　　　　　　</tr>
　　　　　　</table>
　　　</td>
　　</tr>
</table>
といった具合に tableを入れ子にします

Javascriptで
function pDisp(sID, sSW) {
　　var obj;
　　obj = document.getelementById(sID);
　　obj.style.display = sSW;
}
といった具合にしてみてください

この回答へのお礼

回答ありがとうございます。
なるほど！
1回やってみます

お礼日時：2008/02/19 01:43

No.1 回答者： kazumero 回答日時： 2008/01/16 23:49

JavaScriptの方ですが、

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

この回答へのお礼

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

お礼日時：2008/02/19 01:44