- ベストアンサー
フレームで仕切っているHTMLファイルでeventオブジェクトが思うように使えない
- フレームで仕切っているHTMLファイルにおいて、JavaScriptのeventオブジェクトを使用する際に問題が発生しています。
- マウスポインタが重なると文字が出てくる仕組みを作成しましたが、画面をスクロールさせると表示がずれる問題が発生しています。
- 上下をフレームで仕切っているHTMLファイルにおいて、eventオブジェクトを使う際の表示ずれの解消方法を知りたいです。
- qk32
- お礼率20% (23/113)
- JavaScript
- 回答数2
- ありがとう数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を使用 しているような場合）、また表示がずれてしまいました。 そこで親エレメントをすべて検索することにより、イベントの起こった場所 のドキュメント全体での座標を求めるようにしました。 ただ、ひょっとしたらもっとよい方法があるのかもしれません。
その他の回答 (1)
- hi-ogawa
- ベストアンサー率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>
お礼
ありがとうございました。実際のHTMLファイルはさらに別な仕掛けを使っているので、若干こちらでカスタマイズする必要がありますが、とにかく助かりました。こういうのってどこで勉強されるんですか？私は周りに教えてくれる人がいないので、マニュアル本だけがたよりです。