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

質問

今までに、画像を背景として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 · ベストアンサー

こんにちは

こういうことですか？

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

お礼

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

回答No.2

redfox63

画像は 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回やってみます

回答No.1

kazumero

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

お礼

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