onmouseoverでマウスカーソルの位置を基点として別ウィンドウを開く方法

前へ 次へ
このQ&Aのポイント
  • onmouseoverを使用して、マウスカーソルの位置を基点（左上）として別のウィンドウを開く方法を知りたい。
  • マウスカーソルがテキストの上に重なった時に、マウスカーソルの位置を基点として別のウィンドウを開く方法を教えてください。
  • onmouseoverを利用して、マウスカーソルの位置を基点として別のウィンドウを開く方法について教えてください。
回答を見る
  • ベストアンサー

onmouseoverで、マウスカーソルの位置を基点（左上）として、別

onmouseoverで、マウスカーソルの位置を基点（左上）として、別ウインドウを開きたい。 テキストの上にマウスカーソルが重なった（onmouseover）とき、 そのマウスカーソルの位置を左上として、別ウインドウをひらきたいのですが、 やり方がわかりません。 どなたかご教授願います。 よろしくお願いします。 ↓（こんな感じです）=============================== onmouseover="mywin=window.open('aaa.jpg','','width=300,height=250,top=???,left=???;')" ↑（こんな感じです）=============================== 　

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.6

#1です。 safariの環境がないので、まったくの推測でしかありませんが… ＞＞window.open で開いたウインドウに mouseover するので、即座に ＞＞ mouseout する ＞私もこれは考慮したつもりでして、 ＞mouseoverで開くウインドウは、マウスカーソルに重ならないようには、 ＞してはいるのですが・・・。これでよいでしょうか。 もしかすると、新しいウインドウにフォーカスが移動するので（元のウインドウのフォーカスがなくなる）、それによってmouseoutが発生しているということはないでしょうか？（確認できてませんが…） ＞開くウインドウは、画像だけではなくて、画像と説明文が書かれたものですので、 ＞所定のURLをブラウザで開くようにしています。 決まった内容であれば、わざわざ別ウィンドウにしなくても<div>～～</div>に記載しておいて、非表示にしておくだけでも同様のことが可能です。 （必要であれば、position:absoluteで位置を制御するとか） この方法なら、多分、表示位置を重ねない限りはmouseoutは発生しないと思われます。 どうしても別URLであるほうが便利であるのなら、iframeを使用するという方法でも同様のことができそうですね。

asakichi00
質問者

お礼

ご回答ありがとうございます。 ＞もしかすると、新しいウインドウにフォーカスが移動するので（元のウインドウのフォーカスがなくなる）、それによってmouseoutが発生しているということはないでしょうか？（確認できてませんが…） 私もそうだと思っているのですが、safariだけなぞそうなるのか・・・。 ＞<div>～～</div> この方法も検索して確認していたのですが、一度、試してみます。 ありがとうございました。

その他の回答 (7)

  • think49
  • ベストアンサー率59% (285/482)
回答No.8

#2, 3, 4, 5, 7 です。 #7 はユーザがポップアップウインドウを閉じると、imgWin.close() でエラーになりますね。 使用する場合は、何か対策しておいてください。 # やっぱり、window.open() は好きになれないなあ…。

asakichi00
質問者

お礼

ご回答ありがとうございます。 ＞mouseover時のウインドウ位置を少し右下にずらす これも試してみたのですが、かなり右下にずらしても、同現象（開く・閉じるの繰り返し）が再現しました。 ＞fujillinさんも書かれていますが、div要素を動的に表示/非表示すればいいと思います。 その方法で試してみます。 ＞やっぱり、window.open() は好きになれないなあ…。 私も、今回でちょっと懲りました。 皆様、たびたびのご助言、本当にありがとうございました。

  • think49
  • ベストアンサー率59% (285/482)
回答No.7

#2, 3, 4, 5 です。 もう少し、だと思うんですけどね…。自己解決は難しいですか？ > mouseoverで開くウインドウは、マウスカーソルに重ならないようには、してはいるのですが・・・。これでよいでしょうか。 具体的に「どうやって重ならないようにしているか」が書かれていないので何ともいえません。 症状を伺う限りでは、重なっているようですが…。 >> onmouseoutをはずすと、onmouseoverで正常にウインドウが開きました。 解決法としては、2通り考えられます。 ・mouseover時のウインドウ位置を少し右下にずらす (top, left の値を30pxずつ増やすとか) ・mouseoutを行わず、mouseoverだけで処理をする 前者は #5 に書いた内容と変わりません。 後者はイベントバブルを利用します。 (※以下、全角空白を半角空白に置換してください) <script type="text/javascript"><!-- (function () { 　function mouseoverListener (event) { 　　var target = event.target || event.srcElement, 　　　　doc　　= target.ownerDocument; 　　　　win　　= doc.defaultView || doc.parentWindow; 　　if (target.id !== 'target') { 　　　if ('object' === typeof imgWin && imgWin) imgWin.close(), imgWin = null; 　　　return; 　　} 　　try { 　　　imgWin = win.open(target.src, 'foo', 'top=' + event.screenY + ',left=' + event.screenX + ',width=300,height=300'); // Google Chrome 5　のデフォルト設定ではポップアップロックに引っかかり、動作しない (clickのようにユーザ主動の形ならポップアップではないので引っかからない) 　　} catch (error) { 　　　alert(error.name + ': ' + error.message); 　　} 　} 　if (document.addEventListener) { 　　document.addEventListener('mouseover', mouseoverListener, false); 　} else if (document.attachEvent) { 　　document.attachEvent('onmouseover', mouseoverListener); 　} })(); //--></script> </head> <body> <p><img id="target" src="./img/test0.png" /></p> コメントにも書きましたが、これは Google Chrome 5 で動作しません。 ポップアップブロックに引っかかるのは回避しようがないので、これは設計の問題です。 click に変更するか、後述の div要素を生成or表示する方法がお勧めです。 > ＞単純に画像を表示させたいだけなら、window.open しなくていいかもしれません。 > 開くウインドウは、画像だけではなくて、画像と説明文が書かれたものですので、所定のURLをブラウザで開くようにしています。 fujillinさんも書かれていますが、div要素を動的に表示/非表示すればいいと思います。 mouseoverと window.open() を組み合わせると、Google Chrome 5でポップアップブロックに引っかかってしまいます。(デフォルト設定なので、ユーザのほとんどはブロックされます) HTMLを動的に生成or表示するだけなら、ポップアップブロックには引っかかりませんので、その意味でもお勧めです。

  • think49
  • ベストアンサー率59% (285/482)
回答No.5

#2, 3, 4 です。 event.screenX, event.screenY は得られているのですね。 ということは位置を指定できないのではなく、位置を指定して window.open が発動するにもかかわらず、即座に window.close してしまうということですね。 # window.open で指定する top でマウスポインタに位置するのは UIEvent.screenY の方なんですね。何となく、UIEvent.clientY の方だと思っていました。 > onmouseover="mywin=window.open{theURL,winName,features)", > onmouseout="mywin.close()" onmouseout は先に書いていただきたかったです。(それなら話が違ってきます) onmouseout の処理を外した状態では、window.open は期待通りに実行されるでしょうか？ 仮に実行されるとすると、 ・mouseover → window.open → mouseout (window.open で開いたウインドウに mouseover するので、即座に mouseout する) となっている可能性があります。 > また、onclickでも同現象が確認できました。 ということですので、原因はmouseover側ではなく、mouseout側にあるのだと思います。 応急措置ですが、位置を少しずらせば mouseout する条件外になるかなと。 あと、単純に画像を表示させたいだけなら、window.open しなくていいかもしれません。 img要素を動的に生成して、position: relative; で位置調整するとか、Lightbox, shadowbox 的なライブラリを利用する(あるいは参考にして独自にスクリプトを制作する)とか、でもいいような気はします。

asakichi00
質問者

お礼

ご回答ありがとうございます。 ＞onmouseout は先に書いていただきたかったです。 おっしゃられる通りで、深く反省しております。申し訳ございませんでした。 ＞window.open で開いたウインドウに mouseover するので、即座に mouseout する 私もこれは考慮したつもりでして、 mouseoverで開くウインドウは、マウスカーソルに重ならないようには、 してはいるのですが・・・。これでよいでしょうか。 ＞単純に画像を表示させたいだけなら、window.open しなくていいかもしれません。 開くウインドウは、画像だけではなくて、画像と説明文が書かれたものですので、所定のURLをブラウザで開くようにしています。 本当に、いろいろとご指摘ありがとうございます。 もう少し調べてみます。 　

asakichi00
質問者

補足

ひとつ、回答し忘れてました。 >onmouseout の処理を外した状態では、window.open は期待通りに実行されるでしょうか？ onmouseoutをはずすと、onmouseoverで正常にウインドウが開きました。（開く・閉じるの繰り返し現象は発生しませんでした。） なお、現在も未解決につき、ひきつづき調査中でございます。 　 敬具

  • think49
  • ベストアンサー率59% (285/482)
回答No.4

#2, 3 です。 参考までにお聞きしたいのですが、#2 のリンク先では Safari は ・UIEvent.screenX ・UIEvent.screenY ・UIEvent.clientX ・UIEvent.clientY を取得できていますか？(それも問題の切り分けになると思います。)

asakichi00
質問者

お礼

ご回答ありがとうございます。 また、大変ご丁寧なご助言、重ねて御礼申し上げます。 ＞ウインドウの開き方（mywin=window.open）に問題があるのでしょうか。 やはり、mywin=window.openが原因のようです。 window.openにすると、safariでも普通にウインドウが開くのですが、 今回、onmouseoutでそのウインドウを閉じるようにしているのですが、 window.openでウインドウを開いた場合、window.closeで閉じるのは、 window.openで開いたウインドウではなく、 元（親、onmouseover側）のウインドウが閉じられます。 その解決策として、 「mywin=window.open」で開いて、「mywin.close」で閉じる、 とすればいいと、検索したら書いてあったので、そのようにしたのです。 つまり onmouseover="mywin=window.open{theURL,winName,features)", onmouseout="mywin.close()" としています。 これが、safariだけが、正常に動作しません。 （現在も、調査中です。） なお、ご指摘の切り分けですが、 まず、safariでの「ウインドウが開いたり閉じたりする」位置が、 マウスカーソルの座標の位置でしたので、座標は拾えています。 （alertでも、確認しました。） また、onclickでも同現象が確認できました。 詳細にご助言、本当に恐縮いたします。 もう少し調べてみます。 　

  • think49
  • ベストアンサー率59% (285/482)
回答No.3

#2 です。 「Safari Refernce Library」には event.screenX があるので、Safariも対応していそうですが…。 window.open - MDC https://developer.mozilla.org/ja/DOM/window.open open - DOMWindow http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/WebKitDOMRef/DOMWindow_idl/Classes/DOMWindow/index.html#//apple_ref/js/instm/DOMWindow/open/DOMWindow/%28inDOMString%2cinDOMString%2cinDOMString%29 screenX - MouseEvent http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/WebKitDOMRef/MouseEvent_idl/Classes/MouseEvent/index.html#//apple_ref/js/data/MouseEvent/screenX addEventListener - EventTarget http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/WebKitDOMRef/EventTarget_idl/Classes/EventTarget/index.html#//apple_ref/js/instm/EventTarget/addEventListener/void/%28inDOMString%2cinEventListener%2cinboolean%29 問題を切り分けて考えてみてください。 > safariでは、やはり同現象（開く・閉じるを繰り返す）でした。 これだけでは何ともいえませんが、 ・eventオブジェクトを取得できているのか ・event.screenX, event.screenY に適切な値が入っているのか ・onclick なら正常に動作するのか ・onmouseover属性のあるHTMLタグだけにしても再現するのか (他の処理が影響していないか) あたりを確認すれば、原因を探ることが出来ると思います。 ------ <script type="text/javascript"><!-- (function () { 　function mouseoverListener (event) { 　　var target = event.target || event.srcElement, 　　　　doc　　= target.ownerDocument; 　　　　win　　= doc.defaultView || doc.parentWindow; 　　if (target.id !== 'target') { return; } 　　console.log('top=' + event.screenY + ',left=' + event.screenX + ',width=300,height=300'); //　　var win2 = win.open('./img/test0.png'); 　　var win2 = win.open('./img/test0.png', 'foo', 'top=' + event.screenY + ',left=' + event.screenX + ',width=300,height=300'); // Google Chrome 5 ではmouseover時に window.open できない (click時には出来る) 　} 　if (document.addEventListener) { 　　document.addEventListener('mouseover', mouseoverListener, false); 　} else if (document.attachEvent) { 　　document.attachEvent('onmouseover', mouseoverListener); 　} })(); //--></script> </head> <body> <div id="target">mouseover</div> ------

  • think49
  • ベストアンサー率59% (285/482)
回答No.2

検索してみましたが、あまりいいサンプルがHITしないですね…。(今は使われそうにないブラウザ対応を考慮したサンプルが多い) DOM標準実装で作ってみました。 マウスポインタの座標を得る http://vird2002.s8.xrea.com/javascript/getMousePointerCoordinate.html Google Chrome 5 でも問題ないので、多分Safariでも動くと思います。

asakichi00
質問者

お礼

ご回答ありがとうございます。 event.screenX; event.screenY; で試したのですが、これもieでは正常に動作しましたが、 safariでは、やはり同現象（開く・閉じるを繰り返す）でした。 firefoxでは、正常動作を確認しました。 ウインドウの開き方（mywin=window.open）に問題があるのでしょうか。 もう少し調べて見ます。 ありがとうございました。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

マウス位置取得　とか　マウス座標取得　と　javascript　あたりをキーに検索してみるといろいろ見つかると思います。 後は、その位置にウインドウを表示させればよろしいかと…

asakichi00
質問者

補足

ご回答ありがとうございます。 調べてみまして、以下の方法でマウス座標にウインドウを開くことができたのですが、 ブラウザがieの場合、正常に表示されたのですが、 safari（mac）の場合、ウインドウが開いたり、閉じたりします。 （それ以外のブラウザは、まだ確認しておりません。） 現在、原因を調べているのですが、 もしお分かりになるようでしたら、ご教授いただけませんでしょうか。 よろしくお願いします。 ↓（マウス座標取得）======================== function getMouseX(e){ if(window.opera) return e.clientX else if(document.all) return document.body.scrollLeft+event.clientX else if(document.layers||document.getElementById) return e.pageX } function getMouseY(e){ if(window.opera) return e.clientY else if(document.all) return document.body.scrollTop+event.clientY else if(document.layers||document.getElementById) return e.pageY } ↑（マウス座標取得）========================

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

関連するQ&A

  • マウスカーソルについてくる前に左上にいってしまう。

    こんにちは。 マウスカーソルについてくるムービークリップをマスクにして使用したいため、 目的のムービークリップに onClipEvent (enterFrame) { _x += _xmouse/3; _y += _ymouse/3; } というActionScriptを入れました。 きちんと思うように動くのですが、 読み込んだあと、一瞬まず左上に移動してしまいます。 マウスカーソルをうごかして、はじめてマウスカーソルに近づいてきます。 左上に移動してしまうのは格好が悪いので、配置した位置からマウスカーソルに近づいて欲しいのですが、色々調べてもその説明がありません。 どうかよろしくお願いいたします。

    • ベストアンサー
    • Flash
  • セルに貼り付けたコマンドボタンにマウスカーソルを合わせると、

    セルに貼り付けたコマンドボタンにマウスカーソルを合わせると、 コマンドボタンの隣に、ユーザーフォームが表示されるマクロを組んでおります。 しかし、エクセルが最大表示のときは、コマンドボタンの隣にユーザーフォームが表示されるのですが、 エクセルの表示を小さくしたり、画面を下方にスクロールしたりすると、 コマンドボタンに追従せずに、変な場所にユーザーフォームが表示されてしまいます。 できれば、ユーザーフォームの表示位置を、コマンドボタンを基点としたいのですが、 何か良い方法はありますでしょうか。 現在は、アプリケーションの位置を基点にしております。 よろしくお願いします。 Private Sub UserForm_Initialize() Me.StartUpPosition = 0 Me.Top = Application.Top + 180 Me.Left = Application.Left + 100 Me.Height = 80 Me.Width = 100 End Sub

  • 画像にオンマウスで子ウインドウを開きマウスアウトで子を閉じるには

    是非教えてください。 indexにある画像にオンマウスすると、子ウインドウが開き、画像からマウスアウトすると、子ウインドウが閉じるというスクリプトを作りたいです。 <td height="110" width="110" colspan="2" align="center"> <A HREF="#" onmouseover="mywin=window.open('E_sakashita.htm','','width=250,height=400');" onmouseout="window.close();"> <IMG SRC="image/E_sakashita.jpg" WIDTH="142"HEIGHT="106" ALIGN="BOTTOM" BORDER="0" NATURALSIZEFLAG="3"> </A> </td> としたところ、画像からマウスアウトすると、「ウィンドウは、表示中のWebページによりとじられようとしています。このウィンドウを閉じますか？」のメッセージが出ます。 マウスアウトの時には、子ウインドウだけを閉じたいのですが、どのように記述したらいいですか？

  • マウスカーソルが変わるときに、遅くなる

    マウスを動かしているときに、マウスカーソルが変わるタイミング （Windowの端で矢印になったり、リンクで指になったりするとき） に、一瞬マウスの反応が悪くなり、マウスの移動がひっかかってしまいます。 で、普通のカーソルに戻ったときは正常にスムーズに動くようになります。 使っていると徐々に遅くなる（ひっかかりが酷くなる）感じです。 ですが、Windowsを再起動すると、もとに戻ります。 遅くなってしまった状態では、 マウスカーソルが変わる瞬間にHDDにアクセスする音が 一瞬ひどくなっているような感じがします。 また、その状態で、コントロールパネルで、マウスカーソルを標準以外のものに変えてみたりしたのですが、遅いままでした。 なにか、この現象に心当たりがあるかた、いらっしゃいませんでしょうか？

  • 別ウィンドウをそれぞれ違うサイズで位置指定で開きたい

    現在ウェブサイトを作っておりまして、別ウィンドウをそれぞれ違うサイズで位置指定で開きたいと思い、headの中に以下の記述をしました。 <SCRIPT language="JavaScript"> <!-- w = 800; h = 600; function season2009ss() { x = (screen.width - w) / 2; y = (screen.height - h) / 2; subWin = window.open("look/season2009ss.html","season2009ss","screenX="+x+",screenY="+y+",left="+x+",top="+y+",width="+w+",height="+h+",scrollbars=yes"); } //--> </SCRIPT> <SCRIPT language="JavaScript"> <!-- w = 500; h = 660; function contact() { x = (screen.width - w) / 2; y = (screen.height - h) / 2; subWin = window.open("mail/contact.html","contact","screenX="+x+",screenY="+y+",left="+x+",top="+y+",width="+w+",height="+h+",scrollbars=yes"); } //--> </SCRIPT> 開きたい画面は二つあり、位置は両ウィンドウとも画面の真ん中で、サイズのみ違います。 しかし、この形ですとなぜかウィンドウサイズは両方とも同じになってしまい、狙い通りにいきません。 何が原因なのでしょうか。

  • マウスカーソルの位置を取得したい

    Component上でのマウスカーソル位置は、そのコンポーネントに MouseMotionListenerを設定することにより取得できますが、 Conponentに関係なく画面上でのマウスカーソルの位置を取得するには どのようにすれば良いのでしょうか？ 同じ質問ですが、別の表現をしてみると、java.awt.Robotクラスの mouseMoveメソッドを用いれば、（Componentに関係なく）画面上の 任意位置にマウスカーソルを移動できますが、この逆の機能として カーソルの位置を取得する機能は、どの様に実装すれば良いのでしょうか？ 以上、よろしくお願い申し上げます。

    • ベストアンサー
    • Java
  • フルＨＤ画面のマウスカーソルを見失う

    最近フルＨＤの液晶を購入しました。 表示領域が増えたのはうれしいのですが、反面、マウス位置がよくわからなくなります。 そのときには、しょうがないのでマウスを一旦左上に移動してマウスカーソルを確認してから目でマウスカーソルを追いながら目的の位置に移動しています。 ブラウザで表示中もそうですが、特にメモ帳などのエディットカーソル表示中が特に見失ってしまいます。 こういったことを改善するいい方法やアプリなどないでしょうか？ 昔の Windows のときには、マウスの残像を表示してマウスを少し動かせば大体わかるように設定できたような気もしますが・・・・（でもこれはこれで目に痛いのでできれば避けたいのですが）

  • オンマウスでの別Windows表示について

    オンマウスで別画面を開きたく 検索でQNo.1933900を参考に次のように記述してみたのですが、 オンマウス状態だと、別画面が瞬間的に開閉が繰り返されてしまい固定 してくれません。どこか記述がまちがっているのでしょうか。 なお、当方javascriptは初心者につき知識はあまりありません。 <A HREF="#" onmouseover="mywin=window.open('window.htm','','width=640,height=480');" onmouseout="mywin.close();"> <IMG SRC="aa.jpg" WIDTH="142"HEIGHT="106" ALIGN="BOTTOM" BORDER="0" NATURALSIZEFLAG="3"> 今までオンマウスで同じページ内での拡大画像表示をしていたのですが、オンマウス部分をインフレーム内にとじこめてしまったため、親ページで表示できなくなってしまいました。（小さなインフレーム内で表示されてしまう） そこで、上記のようにインフレーム内からのオンマウスでも、別画面で表示をすればと同様のことができると考えたものです。 よろしくお願いします。

  • マウスカーソルを見つけ易くするには

    お世話様です。 OSは Windows7とWindows8.1です。 特にWindows8.1のカーソルは小さくて困っています。 Xpではコントロールパネルから添付のような マウスのプロパティーでポインターの軌跡表示と CTRLを押すとポインタの位置を知らせてくれたのですが 宜しくお願いします。

  • マウスの位置を見つめる「目」がほしい

    昔、UNIXワークステーションというか初期のX-windowにはマウスの位置を見つめるガジェットがありましたよね。古すぎるか。 Windows7用のはないでしょうか。 でかい矢印のマウスアイコンでもいい。 ４モニタにしたらマウスがどこにあるのか分からなくなることが増えたもので。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する