上下をフレームで仕切っている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と関連する良く見られている質問

Qstyle.visibility="hidden";

下記は画面にJavaScriptで碁盤の目に区切り
左上の一区切りの下地を表示するコードです
<html>
<head>
<title>タイル</title>
<script language="JavaScript">
<!--
var block = [0];
function setTile() {
num = 100;
w = Math.floor(document.body.clientWidth / num);
h = Math.floor(document.body.clientHeight/ num);
wTag = "";
n = 1;
for (j=0; j<=h; j++) {
for (i=0; i<=w; i++) {
wTag += "<span id='abc" + n +"' style='position:absolute;top:" + j*num + "px;left:" + i*num + "px;width:" + (num-1) + "px;height:" + (num-1) + "px;background-color:blue;'>" + "</span>";
block[n] ='abc' + n;
n++;
}
}
document.all["tile"].innerHTML = wTag;
document.body.style.visibility = "visible";
abc1.style.visibility="hidden";
}
// -->
</script>
</head>
<body onLoad="setTile()" style="visibility:hidden">
<div id="tile" style="position:absolute;top:0px;left:0px;"></div>
</body>
</html>
下地を表示する
abc1.style.visibility="hidden";
を下記に直すと動かなくなります
block[1].style.visibility="hidden";
よろしくお願いします。

下記は画面にJavaScriptで碁盤の目に区切り
左上の一区切りの下地を表示するコードです
<html>
<head>
<title>タイル</title>
<script language="JavaScript">
<!--
var block = [0];
function setTile() {
num = 100;
w = Math.floor(document.body.clientWidth / num);
h = Math.floor(document.body.clientHeight/ num);
wTag = "";
n = 1;
for (j=0; j<=h; j++) {
for (i=0; i<=w; i++) {
wTag += "<span id='abc" + n +"' style='position:absolute;top:" ...続きを読む

Aベストアンサー

#2です。やりたい事がちょっと分からないんですが、
↓こんな感じでしょうか?(順番にhidden化していく)

<html>
<head>
<title>タイル</title>
<script language="JavaScript">
<!--
var block = new Array();
var n = 0;
var a = 1;
function setTile() {
num = 100;
w = Math.floor(document.body.clientWidth / num);
h = Math.floor(document.body.clientHeight/ num);
wTag = "";
n = 1;
for (j=0; j<=h; j++) {
for (i=0; i<=w; i++) {
wTag += "<span id='abc" + n +"' style='position:absolute;top:" + j*num + "px;left:" + i*num + "px;width:" + (num-1) + "px;height:" + (num-1) + "px;background-color:blue;'>" + "</span>";
block[n] ='abc' + n;
n++;
}
}
document.all["tile"].innerHTML = wTag;
document.body.style.visibility = "visible";
setBlock();
}
function setBlock() {
if (a <= 20) {
eval(block[a] + ".style.visibility='hidden'");
a++;
setTimeout("setBlock()", 1000);
}
}
// -->
</script>
</head>
<body onLoad="setTile();" style="visibility:hidden">
<div id="tile" style="position:absolute;top:0px;left:0px;"></div>
</body>
</html>

#2です。やりたい事がちょっと分からないんですが、
↓こんな感じでしょうか?(順番にhidden化していく)

<html>
<head>
<title>タイル</title>
<script language="JavaScript">
<!--
var block = new Array();
var n = 0;
var a = 1;
function setTile() {
num = 100;
w = Math.floor(document.body.clientWidth / num);
h = Math.floor(document.body.clientHeight/ num);
wTag = "";
n = 1;
for (j=0; j<=h; j++) {
for (i=0; i<=w; i++) {
wTag += "<span id='abc" + n ...続きを読む

Qとどっちに入れる?どっちも入れる??

よくJavaScriptで、<head></head>の間に書きこむのと、<body></body>の間に書くのがありますが、どう違うのでしょうか。<head></head>に書くだけのが大半で、たまに両方書くのがあるのですが、毎回疑問に思ってました。お願いです。教えてくださいまし。

Aベストアンサー

どのような場合に…というのがはっきりしないのであいまいな回答になっちゃいますが、どっちの場合もあります。

functionだとheadの中に書いてますが、動的に文書の内容を書き出したりするような、最終的な命令部分はbodyの中に書いてますね。headの中で定義した関数をbodyの中で呼び出したりしますから。

Q

▼次のようにページ内のdivタグのidの名前によって、formタグ内の要素をdisableにすることはJava scriptによって可能でしょうか?

<div id="AA">のとき、別の場所にある<form id="BB">内のselect要素などすべての要素をdisableにする。

また同時に、id="BB"に指定したスタイルシートの記述を書き換えることは可能でしょうか?

何かよい方法をご存知でしたら教えてください。よろしくお願いいたします。

Aベストアンサー

>なぜか時々エラーが出ます。
ウチでちょっと試した程度ではエラーが発生しませんでした。
できましたら、発生したときのメッセージや場所また、ブラウザの種類なども教えてください。

以下は、予防的な意味での注意点についてちょっと書きます。
>return false;

は、必要ないです。
書かない方がいいと思います。
==nullの場合の処理が必要ないなら
!=nullにすればよいです。
もしくは
return false;でなくて
;
のように空文でもよいです。
あと、idに使っている名前と同じ名前を変数名として使わない方が良いです。
つまり、
id="soldout"の時に
var soldout;という風にはしない方が良いです。
同じでなければ、cartFormでもなんでもかまいません。
あと、scriptは、
<!--
(スクリプトの中身)
//-->
のように
<!--
//-->
で囲むようにします。

getElementById
は、ブラウザやのブラウザのバージョンによっては使えないことがあります。
その場合は、使えるかどうかを調べる必要があります。

<script type="text/javascript">
<!--
function stockStatus (num){
var f=document.getElementById("soldout");

if(f!=null){
for (var i =0; i<=f.length -1 ;i++){
f.elements[i].disabled=num;
}
}
}
//-->
</script>

>なぜか時々エラーが出ます。
ウチでちょっと試した程度ではエラーが発生しませんでした。
できましたら、発生したときのメッセージや場所また、ブラウザの種類なども教えてください。

以下は、予防的な意味での注意点についてちょっと書きます。
>return false;

は、必要ないです。
書かない方がいいと思います。
==nullの場合の処理が必要ないなら
!=nullにすればよいです。
もしくは
return false;でなくて
;
のように空文でもよいです。
あと、idに使っている名前と同じ名前を変数名として...続きを読む

Q&= ~0x0c; &= ~0x03; |=1;

JavaScriptで分からないコードがあるので教えてください。


■変数設定
var hoge = 0;


■変数格納
・キーを押した時の条件分岐
  ~なら hoge |= 1;
  または hoge |= 2;
  または hoge |= 3;
  または hoge |= 8;

・キーを離した時の条件分岐
  ~なら hoge &= ~0x0c;
  または hoge &= ~0x03;


■変数使用
・swithch文の条件分岐に利用
  (hoge&0x03)
  (hoge&0x0c)


■質問
・どういう意味でしょうか?
・文字コード?
・ビット演算?

Aベストアンサー

ビット演算してるわね

x = x + a

x += a
って書くことができるの

つまり
hoge |= 1

hoge = hoge | 1
のことね

~はNOTのこと

0x
はアスキーコードの16進数表記ねきっと

0x0c は改ページを意味していて
0x03 は文章の最後を意味している
と思われるわ
全文がないので推測だけど


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

おすすめ情報