海外旅行から帰ってきたら、まず何を食べる？

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

解決済

  • 質問者：asakichi00
  • 質問日時：
  • 回答数：8件

onmouseoverで、マウスカーソルの位置を基点（左上）として、別ウインドウを開きたい。

テキストの上にマウスカーソルが重なった（onmouseover）とき、
そのマウスカーソルの位置を左上として、別ウインドウをひらきたいのですが、
やり方がわかりません。

どなたかご教授願います。
よろしくお願いします。


↓（こんな感じです）===============================
onmouseover="mywin=window.open('aaa.jpg','','width=300,height=250,top=???,left=???;')"
↑（こんな感じです）===============================

　

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (8件)

No.6ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#1です。


safariの環境がないので、まったくの推測でしかありませんが…


＞＞window.open で開いたウインドウに mouseover するので、即座に
＞＞ mouseout する
＞私もこれは考慮したつもりでして、
＞mouseoverで開くウインドウは、マウスカーソルに重ならないようには、
＞してはいるのですが・・・。これでよいでしょうか。
もしかすると、新しいウインドウにフォーカスが移動するので（元のウインドウのフォーカスがなくなる）、それによってmouseoutが発生しているということはないでしょうか？（確認できてませんが…）


＞開くウインドウは、画像だけではなくて、画像と説明文が書かれたものですので、
＞所定のURLをブラウザで開くようにしています。
決まった内容であれば、わざわざ別ウィンドウにしなくても<div>～～</div>に記載しておいて、非表示にしておくだけでも同様のことが可能です。
（必要であれば、position:absoluteで位置を制御するとか）
この方法なら、多分、表示位置を重ねない限りはmouseoutは発生しないと思われます。

どうしても別URLであるほうが便利であるのなら、iframeを使用するという方法でも同様のことができそうですね。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

＞もしかすると、新しいウインドウにフォーカスが移動するので（元のウインドウのフォーカスがなくなる）、それによってmouseoutが発生しているということはないでしょうか？（確認できてませんが…）

私もそうだと思っているのですが、safariだけなぞそうなるのか・・・。


＞<div>～～</div>

この方法も検索して確認していたのですが、一度、試してみます。
ありがとうございました。

通報する
お礼日時：2010/08/05 07:37

No.8

  • 回答者： think49
  • 回答日時：

#2, 3, 4, 5, 7 です。



#7 はユーザがポップアップウインドウを閉じると、imgWin.close() でエラーになりますね。
使用する場合は、何か対策しておいてください。

# やっぱり、window.open() は好きになれないなあ…。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

＞mouseover時のウインドウ位置を少し右下にずらす
これも試してみたのですが、かなり右下にずらしても、同現象（開く・閉じるの繰り返し）が再現しました。

＞fujillinさんも書かれていますが、div要素を動的に表示/非表示すればいいと思います。
その方法で試してみます。

＞やっぱり、window.open() は好きになれないなあ…。
私も、今回でちょっと懲りました。


皆様、たびたびのご助言、本当にありがとうございました。

通報する
お礼日時：2010/08/05 07:46

No.7

  • 回答者： think49
  • 回答日時：

#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表示するだけなら、ポップアップブロックには引っかかりませんので、その意味でもお勧めです。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： think49
  • 回答日時：

#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 的なライブラリを利用する(あるいは参考にして独自にスクリプトを制作する)とか、でもいいような気はします。

この回答への補足

ひとつ、回答し忘れてました。

>onmouseout の処理を外した状態では、window.open は期待通りに実行されるでしょうか？
onmouseoutをはずすと、onmouseoverで正常にウインドウが開きました。（開く・閉じるの繰り返し現象は発生しませんでした。）



なお、現在も未解決につき、ひきつづき調査中でございます。
　
敬具

補足日時：2010/08/03 07:17
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

＞onmouseout は先に書いていただきたかったです。
おっしゃられる通りで、深く反省しております。申し訳ございませんでした。


＞window.open で開いたウインドウに mouseover するので、即座に mouseout する
私もこれは考慮したつもりでして、
mouseoverで開くウインドウは、マウスカーソルに重ならないようには、
してはいるのですが・・・。これでよいでしょうか。

＞単純に画像を表示させたいだけなら、window.open しなくていいかもしれません。
開くウインドウは、画像だけではなくて、画像と説明文が書かれたものですので、所定のURLをブラウザで開くようにしています。


本当に、いろいろとご指摘ありがとうございます。
もう少し調べてみます。
　

通報する
お礼日時：2010/08/02 17:46

No.4

  • 回答者： think49
  • 回答日時：

#2, 3 です。



参考までにお聞きしたいのですが、#2 のリンク先では Safari は

・UIEvent.screenX
・UIEvent.screenY
・UIEvent.clientX
・UIEvent.clientY

を取得できていますか？(それも問題の切り分けになると思います。)
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
また、大変ご丁寧なご助言、重ねて御礼申し上げます。

＞ウインドウの開き方（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でも同現象が確認できました。


詳細にご助言、本当に恐縮いたします。
もう少し調べてみます。
　

通報する
お礼日時：2010/08/02 14:22

No.3

  • 回答者： think49
  • 回答日時：

#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/docume …
screenX - MouseEvent
http://developer.apple.com/safari/library/docume …
addEventListener - EventTarget
http://developer.apple.com/safari/library/docume …


問題を切り分けて考えてみてください。

> 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>
------
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： think49
  • 回答日時：

検索してみましたが、あまりいいサンプルがHITしないですね…。

(今は使われそうにないブラウザ対応を考慮したサンプルが多い)
DOM標準実装で作ってみました。

マウスポインタの座標を得る
http://vird2002.s8.xrea.com/javascript/getMouseP …

Google Chrome 5 でも問題ないので、多分Safariでも動くと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

event.screenX;
event.screenY;
で試したのですが、これもieでは正常に動作しましたが、
safariでは、やはり同現象（開く・閉じるを繰り返す）でした。
firefoxでは、正常動作を確認しました。

ウインドウの開き方（mywin=window.open）に問題があるのでしょうか。
もう少し調べて見ます。

ありがとうございました。

通報する
お礼日時：2010/08/02 10:01

No.1

  • 回答者： fujillin
  • 回答日時：

マウス位置取得　とか　マウス座標取得　と　javascript　あたりをキーに検索してみるといろいろ見つかると思います。



後は、その位置にウインドウを表示させればよろしいかと…

この回答への補足

ご回答ありがとうございます。

調べてみまして、以下の方法でマウス座標にウインドウを開くことができたのですが、
ブラウザが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
}
↑（マウス座標取得）========================

補足日時：2010/07/31 09:57
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報