オンマウスで新規ウィンドウの追加質問です

質問

No.1004665で質問させていただいたのですが、追加質問お願いします。
教えていただいたレイヤーを使う方法で、表示される説明文が画面からはみ出さないようにするにはどうしたら良いのでしょうか？
よろしくお願いします。

回答No.1

mach999 · ベストアンサー

<SCRIPT>
function showLayer(o){
o.style.display = 'block';
if(event.clientX + parseInt(o.style.width) < document.body.clientWidth)
o.style.left = event.clientX + document.body.scrollLeft;
else
o.style.left = document.body.clientWidth + document.body.scrollLeft - parseInt(o.style.width);

if(event.clientY + parseInt(o.style.height) < document.body.clientHeight)
o.style.top = event.clientY + document.body.scrollTop;
else
o.style.top = document.body.clientHeight + document.body.scrollTop - parseInt(o.style.height);
}

function hideLayer(o){
o.style.display = 'none';
}
</SCRIPT>
<A onMouseOver="showLayer(d)" onMouseOut="hideLayer(d)">aaaa</A>

<DIV id='d' style="position:absolute;width:80px;height:80px;border-style:dotted;display:none;">
補足説明<BR>
です。
</DIV>

※補足
　if(event.clientY + parseInt(o.style.height) < document.body.clientHeight)
で下にはみ出していないかどうか判定して、はみだしていれば、
　o.style.top = document.body.clientHeight + document.body.scrollTop - parseInt(o.style.height);
でうまく収まるようにレイヤーの位置を調整しています（ただし、ウィンドウの大きさが小さすぎる場合はこれでもはみ出します）。
ちなみに、
　event.clientY ・・・ マウスのy座標
　parseInt(o.style.height) ・・・ レイヤーの高さ
　document.body.clientHeight ・・・ ウィンドウの高さ
　document.body.scrollTop ・・・ ページの縦スクロール量
です。

おそらくIEでしか動作しません。クロスブラウザについては自分で工夫して下さい。