• ベストアンサー

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)

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

  • ベストアンサー
回答No.2

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イベントが発生した際にもまたイベントが発生した座標を引数にして呼び出し、 その座標をアラートウィンドウで表示しています。 説明が不足しているようでしたら補足説明しますので遠慮なく仰って下さい。

w-inty
質問者

お礼

回答ありがとうございます。 教えていただいたものをいろいろ自分なりに実行しながらいろいろ考えてみました。 人が書いたものを理解することはどうやらできるようになったみたいですが、 いざ自分がやりたいことをやろうとするとかけない状態のようです。 プログラムの根本的なことはわかってるので、 分岐などは意外と簡単に理解できるんですが、 イベントがイマイチ…。 さらに追加なのですが、ページ上にある画像の上をマウスが通過したらその画像名を取得する、 というのはどのようにしたらいいのでしょうか？ いろいろ錯誤してみましたが無理でした（＞＜）

w-inty
質問者

補足

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')"> とするときちんと表示・削除されました。 表示はきちんとされていますが、これで間違いはないでしょうか？ 私の考え方はあってるでしょうか？？

その他の回答 (5)

  • dayowl
  • ベストアンサー率56% (84/148)
回答No.6

>「画像にマウスオーバーしたら、その下に任意のテーブル >（細かいところはスタイルシートで指定）を表示」 >ということがやりたいんです。 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がわかりやすいかもしれません。

参考URL：
http://page.freett.com/elledia/tips/mouse/mouse_event.html
w-inty
質問者

お礼

無事できました。 ありがとうございました。

回答No.5

任意の文字列を表示、というのは 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さんはご自分のやりたい事の方向性が見えてきたと 仰っていましたが、具体的にはどういう事がしたいのでしょう。 もう少しハッキリとした目標があるならばこちらとしても 的を得た答えを お返しできるかと思うのですが…。

w-inty
質問者

お礼

回答ありがとうございます。 やりたいことというのは、「画像にマウスオーバーしたら、その下に任意のテーブル（細かいところはスタイルシートで指定）を表示」ということがやりたいんです。 教えていただいたものだと文字表示＆テキストボックスですよね。 ただの document.write("－ とやるとページが移動したようになってしまって、ソースが変わってしまうじゃないですか…ここでひっかかってるんです。 教えていただいたソースの一番目に使ってある innerTextを使えばうまくいくんでしょうか？ 自分なりのちょっと試してみたいと思います。

回答No.4

画像名：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"としておきます。 これは変数を宣言する際にも入れてあります。 これで一応 『画像名＋ページ内での座標』の出力は可能です。 ただ少しゴリ押し感が否めないので、全てのブラウザで同じ動作をするかは 全然自信ないです。

w-inty
質問者

お礼

回答ありがとうございます。 無事に今現在自分がやりたいことがちょっとずつできてきました。 そこでさらに壁にぶつかったので教えてください。 [画像１]　[画像２] と並んでいて、画像１・２それぞれにマウスオーバーすると、その下に任意の文字列を出すようにしています。 ここまではうまくいったのですが、マウスアウトしたらその文字列を表示させない、というところがうまくいきません。 ヒントでもいいので教えてください。

w-inty
質問者

補足

現在のコードは <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)
回答No.3

考え方、あってると思いますよ。 他の方法としていくつか例を挙げてみます。 （１） 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」のようにすれば、 画像の名前も別に取得できることです。

参考URL：
http://tohoho.wakusei.ne.jp/www.htm
w-inty
質問者

お礼

回答ありがとうございます。 私も「hyouji('01')」とかだと毎回かえるの面倒だな…と正直思っていたので、この方法は便利ですね。 早速、あまり今のやり方に慣れる前にこっちを覚えちゃおうと思ってます。 さらにさらに追加なのですが、 今は、「座標」と「画像名」を別々に取得していますよね？ これを同時に表示、ということはできないのでしょうか？ テキストボックスに 画像名：x座標,y座標 のように。。。 いろいろ調べてみたのですが、つまづいてしまって先へ進めません！！ どうぞよろしくお願いします。

  • jun-1
  • ベストアンサー率29% (18/61)
回答No.1

以下のURLは参考になるでしょうか？

参考URL：
http://www.openspc2.org/reibun/javascript/mouse/057/index.html
w-inty
質問者

お礼

回答ありがとうございます。 今はまだほとんどわかってない状態なのでいろいろ見ることで覚えたりひらめいたりすることもありますので、 今まで見ていないものを見て参考になりました。 ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • マウスの位置をリアルタイムに取得

    マウスの座標を取得するようにjavascriptを組んだのですが、マウスポインタが移動していないときは座標取得処理をしないようにする方法を探しています。 マウスの座標を変数に保存して最新の座標と比較するようにして、座標が動いたら、座標を画面に表示させるようにできますでしょうか？ マウスポインタの古い座標の保存法がわかりません。 よろしくお願い致します。

  • ページが完全に読み込まれてから関数を動かす

    <body onMousemove="xxx()"> のようにすると、ページが完全に読み込まれる前に関数が実行されて、 エラーになってしまいます。 関数の中には event.clientX でマウスの位置を取得しているので onMousemoveははずせない？？と思います (初心者で、正しく使えてるかわからないのです...) また、エラーが出る原因は、関数の中で指定してるフォームが まだ読み込まれてないこと　です ですので、ページが完全に読み込まれれば、エラーはなくなります。 こんな状態です ・event.clientXは、onMousemove　や　onLoad　などがおきたときのマウスのX座標を取得するものですが、マウスの座標を取得する方法はほかにありますか？ ・エラーが出ないようにするには何か方法はありますか？ エラーが出るのはページが読み込まれるまでの間なので、エラー表示しないような処理をすることになるんですか？

  • java リアルタイムでマウスの座標を取得したい

    マウスのリアルタイム座標を取得したいのですが、 以下のソースを作りました。 しかし、リアルタイムどころか、マウスをクリックしても座標が取得できません どこを修正すればいいのでしょうか？ import java.applet.Applet; import java.awt.*; import java.awt.event.*; import java.awt.event.MouseEvent; import java.net.URL; import java.awt.Image; /*<applet code="applet001" width="640" height="480"></applet>*/ public class applet001 extends Applet implements MouseListener, MouseMotionListener { Dimension dim; int mouse_x, mouse_y; //アプレットの初期化時呼び出される public void init() { dim = getSize(); addMouseListener( this ); } public void update(Graphics g) //オーバーライドして最低限のことだけをする { paint(g); } public void paint(Graphics g) { g.drawString( "マウス:" + mouse_x + "," + mouse_y, 60, 120 ); g.fillOval(mouse_x,mouse_y,30,30); } // マウスの処理 public void mousePressed( MouseEvent e ) { mouse_x = e.getX(); mouse_y = e.getY(); } public void mouseClicked( MouseEvent e ) {} public void mouseReleased( MouseEvent e ) {} public void mouseEntered( MouseEvent e ) {} public void mouseDragged( MouseEvent e ) {} // public void mouseExited( MouseEvent e ) {} // public void mouseMoved( MouseEvent e ) { mouse_x = e.getX(); mouse_y = e.getY(); repaint(); } }

    • ベストアンサー
    • Java
  • 文字がマウスカーソルを追従するスクリプト

    いつもお世話になっております。 以下のサンプルスクリプトで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>

  • Delphi６ OnMouseUp

    deiphi6です。 OnMouseDown,OnMouseMoveイベントで返ってくるX,Y座標値と、OnMouseUpで返ってくるX,Y座標値に違いがあります。 例えば、 ScrollBoxの中にPaintBoxを置いて、PaintBoxのWidth(Height)を32768以上にします。 実行させ、スクロールさせてPaintBoxが32768以上のポイントでマウスボタンを押して離すと。 OnMouseUpで返ってくるX(Y)座標はマイナスになります。 また、65536以上にするとまた1から始まるプラスのX座標がかえってきます。 OnMouseDown,OnMouseMoveでは正常なプラス値です。 つまり、Intergerで返ってきてないってことですか？ OnMouseMoveでの座標を代用して使ってますが、マウスの早い動きには正確を欠きます。 何かいい回避方法はありませんでしょうか？

  • マウス位置の色を得る

    マウス位置は lParam にあるらしいから 　typedef struct tagPOINT { 　　LONG x_zahyo_long; 　　LONG y_zahyo_long; 　}POINT; 　POINT p; 　char x_zahyo[5], y_zahyo[5]; として、 　case WM_RBUTTONDOWN: 　　p.x_zahyo_long = LOWORD(lParam); 　　p.y_zahyo_long = HIWORD(lParam); 　　sprintf(x_zahyo,"%04d", p.x_zahyo_long); 　　sprintf(y_zahyo,"%04d", p.y_zahyo_long); 　　SetWindowText(hrs, x_zahyo); 　　SetWindowText(hrs, y_zahyo); 　break; でやってたけど、得られた座標は常に 0001,0001 でした。 本題とは別だけど、4桁表示のやり方で、もっといいソースがあったら 教えてください。 bcc32 では lParam からマウス位置取得は無理ですか？ lParam が使えなかったから、 　POINT p = { 0,0 }; として、 　GetCursorPos( &p ); で座標を得ました。 それで、ウインドウ上のマウスの位置の色を取得するにはどうしたら いいんですか？ getPixel( ) の引数やソースの書式を教えてほしいです。

  • Javascriptでテーブルタグの座標が知りたい（但し、マウスでなく）

    <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JavaScriptテスト</title> <script type="text/javascript"> <!-- document.onmousedown = msDown //----------------------------------------------------------------------------- // マウスで座標を取得する //----------------------------------------------------------------------------- function msDown(){ var x = event.x; var y = event.y; alert('x=[' + x + '] y=[' + y + ']'); } // --> </script> </head> <body> テーブルタグの<TD>で左上側の画面上の位置の座標位置を取得したいです。 offsetLeftやoffsetTopでは、例えばテーブルタグの上側に<p>がある場合と無い場合でも同じ値でした。 正しく取得する方法はありますか？ <hr> <table cellspacing="0" cellpadding="2" border="1" bgcolor="black"> <tbody> <tr> <td><img src="" width="100" height="100"></td> <td bgcolor="red">この赤のエリアの左上の座標が知りたい（マウスイベントで調べられるが、それを使わずに調べたい） </td> </tr> <tr> <td>456</td> <td><img src="" width="50" hright="50"></td> </tr> </tbody> </table> </body> </html>

  • ＩＥのイベントでのウインドウ位置の取得

    以前に、MdNの「リンクにマウスオーバーするとポップアップで説明が表示される」というサンプルの記述がうまく動作しないという質問で、FairefoxやSafariではその回答でうまく動作するようなのですが、ＩＥの動作がまだ駄目なようなのです。 ＩＥのイベントが発生した時のマウス座標の取得は、Javascriptで、 function OnScreenHelp(x,y){ if(document.all) { /* IEでの処理 */ document.getElementById(strID).style.left = event.x + document.body.scrollLeft + 15; document.getElementById(strID).style.top = event.y + document.body.scrollTop + 0; }else{ 　　　　　　　　　　　　/* IE以外の処理 */ document.getElementById(strID).style.left = x + 15 + "px"; document.getElementById(strID).style.top = y + 0 + "px"; } } のような記述になっているのですが、関数OnScreenHelp(x,y)のx,yがbodyの本文内で、event.pageX、event.pageYのようにＮＮ系の記述になっているため、ＩＥではこのx,yの値は使えないので上記のような記述になっているようなのです。上記の記述ではうまくポップアップしてくれないので、 event.xやevent.yの所の記述がまずいのかな？と思って、ちょっと調べてみて、window.event.offsetXやwindow.event.offsetYに変更してやってみたのですが、うまくいきません。ここの所の、IEの記述としては、どのように記述したらよいか分かりかねています。ご経験のある方、ご教示願えたらと思います。 よろしくお願い致します。

  • 画面をダブリクリックしたカーソルの位置の取得

    WindowsXP上のInternet Exploer 7とSsfariでは取得出来ますが。 WindowsXP上のFirefoxでは取得出来ません。 WindowsXP上のInternet Exploer 7とSsfariの場合。 event.yで取得　下は使用例(画面の上の方をダブリクリック：上にスクロール，画面の下の方をダブリクリック：下にスクロール　の処理をしています) if (event.y <= 200) scrollUp();if (event.y >= yt_k_ww) scrollDown(); WindowsXP上のFirefoxの場合。 http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/013/sample1/index.htmlにより y = evt.layerY;　によりカーソルの位置の取得 window.alert("evt.clientY!!" + y);　取得内容の表示 を入れても「window.alert」が表示されない 上記の参照ホームページでは、y = evt.layerY;によりサンプルが起動しているようですが。 どのようにすれは、Firefoxの場合のカーソルの位置の取得方法を教えて下さい

  • javascriptでオブジェクトのメソッドを使う

    JavaScriptでnewでオブジェクト化したクラス（?）のメソッド、フィールドを利用する方法を教えて下さい。 javascriptにもオブジェクト化という考え方があると聞いたのですが、 例えば、Javaでいうsetter getterのようなメソッドを作り、使用することはできるのでしょうか？ 下記のようなコードを実行したところ Uncaught TypeError: Object #<mousePosi> has no method 'setPara' というエラーが出てしまい、setParaというメソッドはない。と言われてしまいます。 しかし、mousePosi()をオブジェクト化することはできているようなので、 setParaとgetParaを使えるのではないかとおもいました。 どなたかアドバイス下さい。お願いします。 ------------------------------------------------------------------------------------------------- (function LineMain() { console.log("マウスの位置座標を表示"); // console.log("X座標=" + mymouse.x + ",Y座標=" + mymouse.y); //マウスムーブでeventControlを呼び出し addEventListener("mousemove", eventControl, false); function eventControl(event) { var event = event; var myMousePosi = new mousePosi(); myMousePosi.setPara(event); // console.log("X座標=" + obj.getMouse().x + ",Y座標=" + obj.getMouse().y); } function mousePosi() { var paraMouse = { x : 0, y : 0 }; function setPara(event) { this.paraMouse.x = event.x; this.paraMouse.y = event.y; } function getPara() { return this.paraMouse; } } })();

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する