-PR-
解決
済み

文字がマウスカーソルを追従するスクリプト

  • 困ってます
  • 質問No.29551
  • 閲覧数351
  • ありがとう数4
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 95% (334/349)

いつもお世話になっております。

以下のサンプルスクリプトでinnerText・style.left・style.topと書いてあるところがあるのですが、これはどういう意味なのでしょうか?

どなたかわかる方、教えてください。
お願いします。

<HTML>
<HEAD>
<TITLE>マウスポインタ座標表示</TITLE>
<STYLE TYPE="text/css">
<!--
#msxy { position:absolute;
top:0px;
left:0px;
width:48px;
color:black;
background-color:yellow;
font-size:7pt;
border-width:1px;
border-size:1px;
border-style:solid;
}
--></STYLE>
<SCRIPT Language="JavaScript">
<!--
function displayMouseXY(evt)
{
var X = Y = 0;
if (document.all)
{
X = event.x;
Y = event.y;
document.all["msxy"].innerText = X+","+Y;
document.all["msxy"].style.left= X + 8;
document.all["msxy"].style.top = Y + 16;
}
if (document.layers)
{
X = evt.x;
Y = evt.y;
with(document.layers["msxy"])
{
document.open();
document.write("<SMALL>"+X+","+Y+"</SMALL>");
document.close();
left = X + 8;
top = Y + 16;
bgColor = "yellow";
}
}

}
if (document.all) document.onmousemove = displayMouseXY;
if (document.layers) {
window.onmousemove = displayMouseXY;
window.captureEvents(Event.MOUSEMOVE);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
マウスポインタ座標表示<BR>
<DIV ID="msxy"></DIV>
</BODY>
</HTML>
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.2
レベル11

ベストアンサー率 61% (157/255)

innerTextはinnerHTMLとすると、下のNN用の、記述と全く同じ意味になりますね。
document.all["msxy"].innerText で、"msxy"というIDを持つレイヤーの中にある「文字列として」 X+","+Y を代入する。となりますね。HTMLとしてではなく、文字列として代入されます。HTMLとして代入したいときは、
document.all["msxy"].innerHTML としてやれば、HTMLとして代入できます。この場合は、 X+","+Y を "<FONT color=red><B>"+X+","+Y+"</B></FONT>" というように、HTMLとして代入することが出来ます。innerTextとinnerHTMLとを書き換えたりして、仕組みの違いを覚えておくと良いでしょう。

document.all["msxy"].style.left とはpussyfootのおっしゃる通りで、 "msxy"というIDを持つレイヤー の(スタイルプロパティーの中の)X座標という意味です。(スタイルプロパティーには、このほかにも、高さ(height)や幅(width)など、多数あります。
お礼コメント
bridgewood

お礼率 95% (334/349)

スタイルプロパティーというのをまるきり知りませんでした(^_^;)
回答を参考に自分でいじくってみて、少しずつ理解してます。
どうもありがとうございました。助かりました。
投稿日時 - 2001-01-20 10:19:54
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.1
レベル10

ベストアンサー率 28% (39/138)

スクリプトを実行したんでも、動きを見たわけでも無いのですが、おそらく innerText = X+","+Yで下の方の <DIV ID="msxy"></DIV> で宣言したDIVタグの中に座標を表示してます。innerTextって言うのがテキストって言うことで、そこに代入してるので表示だと思います。。 document.all[& ...続きを読む
スクリプトを実行したんでも、動きを見たわけでも無いのですが、おそらく
innerText = X+","+Yで下の方の
<DIV ID="msxy"></DIV>
で宣言したDIVタグの中に座標を表示してます。innerTextって言うのがテキストって言うことで、そこに代入してるので表示だと思います。。
document.all["msxy"].style.left= X + 8;
document.all["msxy"].style.top = Y + 16;
同様に、DIVタグの座標を設定してます。つまり、XとY座標を設定することにより、マウスを追っかけます。

このスクリプトは、座標の数字がマウスポインタを追っかける物でしょうね?
お礼コメント
bridgewood

お礼率 95% (334/349)

意味がつかめてきました。
自分でいじくって、色々試してみます。
どうもありがとうございました。
投稿日時 - 2001-01-20 10:22:35


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

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

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

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ