上下をフレームで仕切っているHTMLファイルの下側で、JavaScriptのeventオブジェクトを使用して、いくつかの場所でマウスポインタが重なると、文字が出てくる仕組みを作りました。一見うまくいったように思えたのですが、画面を下にスクロールさせた時に、そのスクロールをさせただけ上にずれて表示されます。これって解消方法はあるのでしょうか?

以下、HTMLファイルより一部抜粋(ファイル名:program.html)

++++headタグ部分++++
<style type="text/css">
<!--
iv { font-size: 11pt; font-weight: bold; color: #FF0000; position: absolute; visibility: hidden; clip: rect( )}
-->
</style>
<script Language="JavaScript">
<!--
function chipHelp(tagName,types,x,y)
{
if (document.layers)
{
document.layers[tagName].x =x;
document.layers[tagName].y =y;
document.layers[tagName].visibility = types;
}
if (document.all)
{
document.all(tagName).style.pixelLeft =x;
document.all(tagName).style.pixelTop =y;
document.all(tagName).style.visibility =types;
}
}
// -->
</script>
</head>

++++以下bodyタグ部分++++
<body>


<a href="program.html" onMouseover="chipHelp('0600sat','visible',event.x,event.y)" onMouseout="chipHelp('0600sat','hidden',0,0)">釣りDAISUKI</a>


<div id="0600sat"> 土・6時15分→土・6時00分</div>
</body>
</html>

ちなみにこのスクリプトは、『JavaScript+CGI&Perl 決定版!ホームページサンプルスクリプト大全集』のJavaScriptサンプル集_応用編25「マウスが重なったとき説明文を表示」を参考にしています。

このQ&Aに関連する人気のQ&A

A 回答 (2件)

すみません。

前回乗せたソースにバグがありました。
スクリプト部分を以下のとおり修正する必要があります。


<script Language="JavaScript">
<!--
function chipHelp(tName, types, evt)
{
if (document.layers){
document.layers[tName].x =evt.x;
document.layers[tName].y =evt.y;
document.layers[tName].visibility = types;
}
if (document.all){
var obj;
var ox=evt.offsetX, oy=evt.offsetY;
obj = evt.srcElement.parentElement;
while(obj.tagName != "BODY"){
ox+=(obj.offsetLeft-1);
oy+=(obj.offsetTop-1);
obj = obj.parentElement;
}
document.all(tName).style.left = ox;
document.all(tName).style.top = oy;
document.all(tName).style.visibility = types;
}
}
//-->
</script>


もともとの問題は、IEの場合 event.x,yで得られる座標がブラウザの
可視領域上の座標であるのに対し、style.top,leftの座標はドキュメント
全体での座標を指しているために起こったようでした。
そこでevent.offsetX,offsetYによりで親エレメントとの相対座標を求め
対応しようとしたのですが、親エレメントがbody以外の場合(tableを使用
しているような場合)、また表示がずれてしまいました。
そこで親エレメントをすべて検索することにより、イベントの起こった場所
のドキュメント全体での座標を求めるようにしました。
ただ、ひょっとしたらもっとよい方法があるのかもしれません。
    • good
    • 0
この回答へのお礼

ありがとうございました。実際のHTMLファイルはさらに別な仕掛けを使っているので、若干こちらでカスタマイズする必要がありますが、とにかく助かりました。こういうのってどこで勉強されるんですか?私は周りに教えてくれる人がいないので、マニュアル本だけがたよりです。

お礼日時:2001/03/29 10:55

こんにちは。


以下のようにしてみましたが、いかがでしょうか。
IE5.5、NS4.75で確認済みです。(Netscape6だとだめですね。)
実際のページで試してみてください。
あと、うろ覚えですが、idは英文字で始めければいけなかった
ような気がします。


<html>
<head>
<style type="text/css">
<!--
div {
font-size: 10pt;
font-weight: bold;
color: #FF0000;
position: absolute;
visibility: hidden;
}
-->
</style>
<script Language="JavaScript">
<!--
function chipHelp(tagName,types, evt) {
if (document.layers){
document.layers[tagName].x = evt.x;
document.layers[tagName].y = evt.y;
document.layers[tagName].visibility = types;
}
if (document.all){
document.all(tagName).style.left = evt.offsetX;
document.all(tagName).style.top = evt.offsetY;
document.all(tagName).style.visibility = types;
}
}
// -->
</script>
</head>
<body>
...

<a href="program.html"
onMouseover="chipHelp('sat0600','visible',event)"
onMouseout="chipHelp('sat0600','hidden',event)"
>釣りDAISUKI</a>
...

<div id="sat0600"> 土・6時15分→土・6時00分</div>
</body>
</html>
    • good
    • 0

このQ&Aに関連する最新のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


このカテゴリの人気Q&Aランキング

おすすめ情報

カテゴリ