プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：qk32
  • 質問日時：
  • 回答数：2件

上下をフレームで仕切っている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「マウスが重なったとき説明文を表示」を参考にしています。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： hi-ogawa
  • 回答日時：

すみません。

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


<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

No.1

  • 回答者： hi-ogawa
  • 回答日時：

こんにちは。


以下のようにしてみましたが、いかがでしょうか。
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が見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報