- ベストアンサー
JavaScriptでマウス位置をリアルタイムで取得
ウィンドウを開いたら、マウス位置をリアルタイムで取得し、ウィンドウ上に表示ということをしたいのですが、まったくわかりません。 function mousecursor(evt){ //関数の定義 X = event.x; //イベント発生場所のX座標取得 Y = event.y; //イベント発生場所のY座標取得 window.status = X + "," + Y;} //ステータスバーに表示 document.onmousemove = mousecursor; //マウスカーソルが動いたら、関数を呼び出す。（bodyタグで呼び出しも可） というようなソースを手に入れたのでやってみたら、できることはできたんですが、なんとなくしか意味がわかってません。 HTMLやPerl、VBAなどはできるんですが、どうしてもJavaScriptがあんまり理解できないんです…。 リアルタイムで取得し、表示、ということではなくても、自分の任意したように出力させたいんです。 （たとえばどこかをクリックしたらアラート表示など） よろしくお願いします。
- w-inty
- お礼率72% (1169/1618)
- JavaScript
- 回答数6
- ありがとう数7
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
No.1で提示して下さっているURLでの例はクリッカブルマップでの例ですね。 <body>にonmousemoveを指定する事で、 そのページのどこの座標でも取得できるようになります。 w-intyさんはJavaScriptが理解できていないと仰っているので少し詳しく書いてみますね。 リアルタイムで取得、表示はonmousemove(マウスが動いたら)イベントで、 クリックで取得、表示はonclick(クリックされたら)イベントで 関数(function XXXXと書かれているもの)を呼び出します。 以下のソースをテキストにそのまま貼り付けて、htmlで開いてみて下さい。 ―ソースここから――――――――――――――――――――――――― <html> <head> <script language="JavaScript"><!-- function check(mx,my) { document.myFORM.Result.value = mx+","+my; } function checkClk(mx,my) { alert(mx+","+my); } // --></script> </head> <body onMousemove="check(event.offsetX,event.offsetY)" onClick="checkClk(event.offsetX,event.offsetY)"> <form name="myFORM"> x,y:<input type="text" name="Result"> </form> </body> </html> ―ソースここまで――――――――――――――――――――――――― w-intyさんの提示なさっているソースでは onmousemoveイベントが発生した際に関数を呼び出し、 関数内でonmousemoveイベントが発生した座標を取得してそのまま表示させています。 私の提示したソースでは onmousemoveイベントが発生した際に関数を呼び出すまでは同じなのですが、 onmousemoveイベントが発生した座標を引数にして呼び出して、 その座標を表示させています。 また、onclickイベントが発生した際にもまたイベントが発生した座標を引数にして呼び出し、 その座標をアラートウィンドウで表示しています。 説明が不足しているようでしたら補足説明しますので遠慮なく仰って下さい。
その他の回答 (5)
- dayowl
- ベストアンサー率56% (84/148)
>「画像にマウスオーバーしたら、その下に任意のテーブル >（細かいところはスタイルシートで指定）を表示」 >ということがやりたいんです。 IEとNetscape6以降に対応させるのであれば、次のようなソースでいけると思います。 <html> <head> <STYLE TYPE="text/css"> <!-- #document_hoge { position:absolute;top:100;left:100; width:250;height:40;clip:rect(0,250,40,0) } //--> </STYLE> <script language="JavaScript"> <!-- IE = (document.all) ? 1 : 0;/* IEかどうかの判定 */ NN6 = (document.getElementById) ? 1 : 0;/* Netscape6以降かどうかの判定 */ if (NN6) {/* Netscape用の処理 */ document.images["01"].onmouseover = function temp(){sendName(this.name)}; document.images["01"].onmouseout = function temp(){Modoru(this.name)}; document.images["02"].onmouseover = function temp(){sendName(this.name)}; document.images["02"].onmouseout = function temp(){Modoru(this.name)}; } function sendName(name){ source = '<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">'; source += '<SPAN STYLE="font:10pt Osaka,Arial">'; source += name; source += '</SPAN>'; if (IE) { document.all("document_hoge").innerHTML = source; /* IE用の処理 */ } else if(NN6) { document.getElementById("document_hoge").innerHTML = source; /* Netscape用の処理 */ } } function Modoru(name){ source = ""; if (IE) { document.all("document_hoge").innerHTML = source; /* IE用の処理 */ } else if (NN6) { document.getElementById("document_hoge").innerHTML = source; /* Netscape用の処理 */ } } // --> </script> </head> <body> <img src="01.gif" NAME='01' onMouseOver="sendName(this.name)" onMouseOut="Modoru(this.name)"> <img src="02.gif" NAME='02' onMouseOver="sendName(this.name)" onMouseOut="Modoru(this.name)"> <span ID="document_hoge"></span> </body> </html> あらかじめ「<span ID="document_hoge"></span>」というレイヤを埋め込んでおいて sourceという文字列変数にHTMLソースを入れ、 document_hogeレイヤに書き込む、という方法です。 IE専用にするならもっと簡単にできますが、 Netscapeは「<img src="01.gif" NAME='01' onMouseOver=...」では マウスオーバーのイベントをトラップできないので、 イメージオブジェクトごとに↓こういう記述が必要になります。 「document.images["01"].onmouseover = function temp(){sendName(this.name)};」 マウスイベントについては参考URLがわかりやすいかもしれません。
お礼
無事できました。 ありがとうございました。
- shime-saba
- ベストアンサー率100% (6/6)
任意の文字列を表示、というのは inputフォームに表示させればいいならまだしも、 普通のテキストとして表示させるとなるとブラウザの互換性を考えたり等色々煩雑ですので ブラウザ互換は気にせず、今回ザッと３パターン用意しました。 ―ソース１ここから――――――――――――――――――――――――― <html> <head><title>innerText版</title></head> <body> <table border="0"><tr> <td><img src="large.jpg" onMouseOver="dspLarge.innerText='hoge1'" onMouseOut="dspLarge.innerText=''"></td> <td><img src="small.jpg" onMouseOver="dspSmall.innerText='hoge2'" onMouseOut="dspSmall.innerText=''"></td> </tr> <tr> <td><span id="dspLarge"></span></td> <td><span id="dspSmall"></span></td> </tr></table> </body> </html> ―ソース１ここまで――――――――――――――――――――――――― ―ソース２ここから――――――――――――――――――――――――― <html> <head><title>visibility版</title></head> <body> <table border="0"><tr> <td><img src="large.jpg" onMouseOver="dspLarge.style.visibility='visible'" onMouseOut="dspLarge.style.visibility='hidden'"></td> <td><img src="small.jpg" onMouseOver="dspSmall.style.visibility='visible'" onMouseOut="dspSmall.style.visibility='hidden'"></td> </tr> <tr> <td><span id="dspLarge" style="visibility:hidden;">hoge1</span></td> <td><span id="dspSmall" style="visibility:hidden;">hoge2</span></td> </tr></table> </body> </html> ―ソース２ここまで――――――――――――――――――――――――― ―ソース３ここから――――――――――――――――――――――――― <html> <head> <title>inputフォーム版</title> <script language="javascript"><!-- function dspText(flag, message) { switch(flag) { case '1': hogeForm.dspLarge.value = message; break; case '2': hogeForm.dspSmall.value = message; break; } } //--></script> </head> <body> <form name="hogeForm"> <table border="0"><tr> <td><img src="large.jpg" onMouseOver="dspText('1', 'hoge1')" onMouseOut="dspText('1', '')"> </td> <td><img src="small.jpg" onMouseOver="dspText('2', 'hoge2')" onMouseOut="dspText('2', '')"></td> </tr> <tr> <td><input type="text" name="dspLarge"></td> <td><input type="text" name="dspSmall"></td> </tr></table> </form> </body> </html> ―ソース３ここまで――――――――――――――――――――――――― ソース１で使用しているinnerTextはネスケに対応しているか分かりません。 私の記憶している限りでは、IE4～は動作するようです。 ソース２で使用しているvisibilityは 一応両方に対応していますが、ネスケは確か6あたりからしか対応していなかったかと。 上記２つはブラウザ互換を考えるとあまり現実的ではないので ソース３が無難ですかね。 それと、w-intyさんはご自分のやりたい事の方向性が見えてきたと 仰っていましたが、具体的にはどういう事がしたいのでしょう。 もう少しハッキリとした目標があるならばこちらとしても 的を得た答えを お返しできるかと思うのですが…。
お礼
回答ありがとうございます。 やりたいことというのは、「画像にマウスオーバーしたら、その下に任意のテーブル（細かいところはスタイルシートで指定）を表示」ということがやりたいんです。 教えていただいたものだと文字表示＆テキストボックスですよね。 ただの document.write("－ とやるとページが移動したようになってしまって、ソースが変わってしまうじゃないですか…ここでひっかかってるんです。 教えていただいたソースの一番目に使ってある innerTextを使えばうまくいくんでしょうか？ 自分なりのちょっと試してみたいと思います。
- shime-saba
- ベストアンサー率100% (6/6)
画像名：x座標, y座標 での座標とはページ上の座標、という事で話を進めます。 ―ソースここから――――――――――――――――――――――――― <html> <head> <script language="JavaScript"><!-- var imageName = "No file"; function check(mx,my) { document.myFORM.Result.value = mx+","+my; } function checkClk(mx,my) { alert(imageName + ":" + mx + "," + my); imageName = "No file"; } function sendName(name) { imageName = name; } // --></script> </head> <body onMousemove="check(event.offsetX,event.offsetY)" onClick="checkClk(event.offsetX,event.offsetY)"> <form name="myFORM"> x,y:<input type="text" name="Result"> <img src="large.jpg" onClick="sendName(this.src)"> </form> </body> </html> ―ソースここまで――――――――――――――――――――――――― 前の私のソースに少し手を加えただけのもので、 追加した項目は、画像・画像名保持の変数・その変数を画像名で置き換える関数 の３つです。 このソースでの動作は実際に見て頂く方が早いと思います。 さて、実際にどのようにして表示させているかというと 画像の上でクリックされた場合は <img>タグで指定したonclick属性に記述した関数が呼び出され、 画像名保持のための変数を置き換えます。 次に<body>で指定したonclick属性に記述した関数が呼び出され、 『画像名：x座標, y座標』 のようなアラートウィンドウが開きます。 では画像の上以外でクリックされた場合は…というと、 画像名は取得できませんので、アラートウィンドウを出した直後に 画像名保持の変数を"No file"としておきます。 これは変数を宣言する際にも入れてあります。 これで一応 『画像名＋ページ内での座標』の出力は可能です。 ただ少しゴリ押し感が否めないので、全てのブラウザで同じ動作をするかは 全然自信ないです。
お礼
回答ありがとうございます。 無事に今現在自分がやりたいことがちょっとずつできてきました。 そこでさらに壁にぶつかったので教えてください。 [画像１] [画像２] と並んでいて、画像１・２それぞれにマウスオーバーすると、その下に任意の文字列を出すようにしています。 ここまではうまくいったのですが、マウスアウトしたらその文字列を表示させない、というところがうまくいきません。 ヒントでもいいので教えてください。
補足
現在のコードは <head> <script language="JavaScript"> ： ： functin sendName(name){ ---- ---- switch(imageName){ case '01': document.write("--- break; } } function Modoru(name){ imageName = name; document.write("--- } </script> <BODY> : : <img src="01.gif" NAME='01' onMouseOver="sendName(this.name)" onMouseOut="Modoru(this.name)"> というようになっています。 でもマウスオーバーした時点でsendName()の中を実行中なんで、その下のModoru()は、ソースには記述されていない状態になるわけですよね？ これをどうにかしたいのですが。。。
- dayowl
- ベストアンサー率56% (84/148)
考え方、あってると思いますよ。 他の方法としていくつか例を挙げてみます。 （１） function hyouji(img){ gazou = img + '.gif'; document.myFORM.imgname.value = gazou; } <IMG SRC="01.gif" NAME="01" onMouseOver="hyouji(this.name)"> 「this.name」は自分自身の「NAME=～」で指定されている文字列です。 こうすると <IMG SRC="01.gif" NAME="01" onMouseOver="hyouji(this.name)"> <IMG SRC="02.gif" NAME="02" onMouseOver="hyouji(this.name)"> というふうに記述できて、「onMouseOver=～」の部分は修正しなくていいので楽ですね。 （２） function hyouji(src){ gazou = src.substring(src.lastIndexOf("/") + 1); document.myFORM.imgname.value = gazou; } <IMG SRC="01.gif" NAME="画像の名前" onMouseOver="hyouji(this.src)"> というふうにもできます。 「this.src」は「SRC=～」で指定されたファイルの場所を示す文字列です。 直接「SRC=～」で指定したファイル名を見るので、 「NAME=～」に何を指定しても関係なくなりますので、 <IMG SRC="01.gif" NAME="画像１" onMouseOver="hyouji(this.src)"> <IMG SRC="02.gif" NAME="画像２" onMouseOver="hyouji(this.src)"> というふうに記述できて間違いが少なくなりそうですね。 （３） function hyouji(imgObj){ srcfile = img.src; imgname = img.name; gazou = srcfile.substring(srcfile.lastIndexOf("/") + 1); document.myFORM.imgname.value = gazou; } <IMG SRC="01.gif" NAME="画像１" onMouseOver="hyouji(this)"> 基本的に（２）と同じなのですが、 「this」は<～>で記述されたオブジェクトそのものを示します。 これのメリットは「imgname = img.name」のようにすれば、 画像の名前も別に取得できることです。
お礼
回答ありがとうございます。 私も「hyouji('01')」とかだと毎回かえるの面倒だな…と正直思っていたので、この方法は便利ですね。 早速、あまり今のやり方に慣れる前にこっちを覚えちゃおうと思ってます。 さらにさらに追加なのですが、 今は、「座標」と「画像名」を別々に取得していますよね？ これを同時に表示、ということはできないのでしょうか？ テキストボックスに 画像名：x座標,y座標 のように。。。 いろいろ調べてみたのですが、つまづいてしまって先へ進めません！！ どうぞよろしくお願いします。
- jun-1
- ベストアンサー率29% (18/61)
以下のURLは参考になるでしょうか？
お礼
回答ありがとうございます。 今はまだほとんどわかってない状態なのでいろいろ見ることで覚えたりひらめいたりすることもありますので、 今まで見ていないものを見て参考になりました。 ありがとうございました。
お礼
回答ありがとうございます。 教えていただいたものをいろいろ自分なりに実行しながらいろいろ考えてみました。 人が書いたものを理解することはどうやらできるようになったみたいですが、 いざ自分がやりたいことをやろうとするとかけない状態のようです。 プログラムの根本的なことはわかってるので、 分岐などは意外と簡単に理解できるんですが、 イベントがイマイチ…。 さらに追加なのですが、ページ上にある画像の上をマウスが通過したらその画像名を取得する、 というのはどのようにしたらいいのでしょうか？ いろいろ錯誤してみましたが無理でした（＞＜）
補足
function hyouji(img){ gazou = img + '.gif'; window.alert(gazou); } <IMG SRC=01.gif NAME=img01 onMouseOver="hyouji('01')"> としてみたらきちんとアラーと表示されました。 では次はテキストボックス…と思い、 function hyouji(img){ gazou = img + '.gif'; document.myFORM.imgname.value = gazou; } function hyoujimodosu(img){ document.myFORM.imgname.value = ""; } <IMG SRC=01.gif NAME=img01 onMouseOver="hyouji('01')" onMouseOut="hyoujimodosu('01')"> とするときちんと表示・削除されました。 表示はきちんとされていますが、これで間違いはないでしょうか？ 私の考え方はあってるでしょうか？？