テーブルとオンマウス

質問

<span>
<a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a>
<span class="txt1" style="display:none;position:absolute;border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">ほげ1<br></span>
</span>
<span>
<a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a>
<span class="txt1" style="display:none;position:absolute;border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">ほげ2<br></span>
</span>
<span>
<a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a>
<span class="txt1" style="display:none;position:absolute;border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">ほげ3<br></span>
</span>
<span>

以前ここで回答を頂いた上記をスクロールバー付きのテーブルの中で使おうと思いましたが（少し省略してあります）問題が発生したので質問しました。

分かりづらいですが、画像で解説です。
http://www3.ezbbs.net/22/kinokokinoko/img/1185714736_1.JPG

スクロールバー付きのテーブルの中の文字Aの上にマウスを置いた時に文字Cの位置、つまりスクロールバー付きのテーブルの外側に文字を出したいのです。
しかし、実際にはスタイルシートで位置を指定してもマウスを文字Aの上に置いた時、文字Bのようにスクロールバー付きのテーブルの内部に文字が表示されてしまいます。
これを最初に書いた通り、スクロールバー付きのテーブルの外側に文字を指定の位置に表示する方法はあるのでしょうか？。

回答No.1

leap_day · ベストアンサー

こんにちは

省略された部分がちょっと大事だったりして（－－；）
まぁ、前回答えさせてもらってますので分かるのですがこちらのでやるとしたらこんな感じ？

<script language="javascript">
<!--
function setSpanDisplay(obj,dsp){
var cn=obj.parentNode.childNodes;
for(var i=0;i<cn.length;i++){
if(cn[i].className=="txt1" ){
html = cn[i].innerHTML;
break;
}
}
document.getElementById("result").innerHTML = html;
document.getElementById("result").style.display = dsp;
}
//-->
</script>

<div style="width:100px;height:50px;overflow:auto;">
<table>
<tr>
<td>
<a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a>
<span class="txt1" style="display:none;">ほげ1<br></span>
</td></tr>
<tr><td>
<a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a>
<span class="txt1" style="display:none;">ほげ2<br></span>
</td></tr>
<tr><td>
<a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a>
<span class="txt1" style="display:none;">ほげ3<br></span>
</td></tr></table>
</div>

<div id="result" style="display:none;position:absolute;top:50px;left:200px;border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width:465px;"></div>

<div id="result">のtop:left:で表示位置は調整してください

お礼

今回も回答ありがとうございます。
私の求めていた回答どうりでしたので助かりました。