上下をフレームで仕切っている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「マウスが重なったとき説明文を表示」を参考にしています。
No.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を使用
しているような場合)、また表示がずれてしまいました。
そこで親エレメントをすべて検索することにより、イベントの起こった場所
のドキュメント全体での座標を求めるようにしました。
ただ、ひょっとしたらもっとよい方法があるのかもしれません。
ありがとうございました。実際のHTMLファイルはさらに別な仕掛けを使っているので、若干こちらでカスタマイズする必要がありますが、とにかく助かりました。こういうのってどこで勉強されるんですか?私は周りに教えてくれる人がいないので、マニュアル本だけがたよりです。
No.1
- 回答日時:
こんにちは。
以下のようにしてみましたが、いかがでしょうか。
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が見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
DOM要素を削除しても、イベント...
-
選択肢によってラジオボタンを...
-
javascriptの基本的なことだと...
-
ネスケ6以上でも動作させたいの...
-
質問です! Operaって、document...
-
Null またはオブジェクトではあ...
-
[DOM] 取得したHTMLのオブジェ...
-
responseTextのデータをevaluate
-
デフォルトのリンクの色
-
二つのフィルタを同時に使用したい
-
onClickイベントの変更方法
-
FireFoxのjavascriptで自動でキ...
-
onload時にPostBackを発生させ...
-
関数でy=g(x)のgとは何の略です...
-
同じIDで定義した要素の配列を...
-
ASP.NETのコントロールの値をJa...
-
ASP+アクセスでのSQLコメントに...
-
javascriptを用いて作成された...
-
C#OpenCv V4にのエラーに関する...
-
<a>タグのテキストを取得
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptの基本的なことだと...
-
Latexに関する質問です。
-
DOM要素を削除しても、イベント...
-
文字を一文字ずつ表示
-
Null またはオブジェクトではあ...
-
excle VBA とweb上の検索を利用...
-
JavaScript window.openで開く...
-
FireFoxのjavascriptで自動でキ...
-
UWSCでオンクリックのボタンを...
-
ラジオボタンでreadonlyの切替え
-
XMLでのAttributeを持ったNode...
-
乗換案内 VBAで操作したい
-
Javascriptで定期的にF5を押す...
-
responseTextについて
-
webページ上のTabキーの動き
-
クリッカブルマップのリンク部...
-
ie操作 フレームのURLが...
-
TexでΣの添え字の位置直し
-
連動するセレクトボックスの内...
-
LaTeX:数式を等号揃えにする方法
おすすめ情報