-PR-
解決済み

フレームで仕切っているHTMLファイルでeventオブジェクトが思うように使えない

  • すぐに回答を!
  • 質問No.54333
  • 閲覧数126
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 20% (23/113)

上下をフレームで仕切っている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「マウスが重なったとき説明文を表示」を参考にしています。
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.2
レベル5

ベストアンサー率 100% (2/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を使用
しているような場合)、また表示がずれてしまいました。
そこで親エレメントをすべて検索することにより、イベントの起こった場所
のドキュメント全体での座標を求めるようにしました。
ただ、ひょっとしたらもっとよい方法があるのかもしれません。
お礼コメント
qk32

お礼率 20% (23/113)

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

その他の回答 (全1件)

  • 回答No.1
レベル5

ベストアンサー率 100% (2/2)

こんにちは。
以下のようにしてみましたが、いかがでしょうか。
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>


このQ&Aのテーマ
このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


専門家があなたの悩みに回答!

-PR-

ピックアップ

-PR-
ページ先頭へ