- ベストアンサー
ポップアップをクリックで終了させる方法
Javaの知識はありませんが、あるサイトから画像にマウスオンするとその下にポップアップでリンクが表示されるスクリプトをいただきました。 それはマウスが外れたらポップアップが消えるようになっているのですが、フレーム内などでマウスが外れた場合には認識されず、ポップアップがずっとでている状態になってしまいます。 そこで、クリックしたらポップアップが消えるようにしたいのですが、そのようにできる方法はありますか？
- minnie123456789
- お礼率75% (6/8)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
これなら、iframe内にマウスが移動しても消えます。 <html> <head> <style> .menu { position:absolute; display:none; width:200px; border:1px #000000 solid; background-color:#ffff99; padding:4px 4px 4px 4px; } </style> <script> var now =''; Coodinate1 = new Array('',''); Coodinate2 = new Array('',''); function show_menu(_elem, n){ // 今メニューを表示していたら、それを消す if(now != '' && now.style.display == 'block'){ now.style.display = 'none'; } left=_elem.style.left; with(document.getElementById('menu'+n)){ style.display = 'block'; style.left = left; Coodinate1[0] = offsetLeft; Coodinate1[1] = offsetTop; Coodinate2[0] = (offsetWidth + offsetLeft); Coodinate2[1] = (offsetHeight + offsetTop); } // 表示したメニューを保持 now = document.getElementById('menu'+n); } function hide_menu(_elem){ _elem.style.display = 'none'; } function hide_menu2(_elem){ mouseX = event.clientX; mouseY = event.clientY; status_ = !(((Coodinate1[0] < mouseX)&&(mouseX < Coodinate2[0])) && ((Coodinate1[1] < mouseY)&&(mouseY < Coodinate2[1]))); if(status_){ _elem.style.display = 'none'; Coodinate1 = new Array('',''); Coodinate2 = new Array('',''); } } </script> </head> <body> <div> <span id="tag1" onMouseover="show_menu(this, 1);" onMouseout="hide_menu2(document.all.menu1);" style="left:10px">タグ1 | </span> <span id="tag2" onMouseover="show_menu(this, 2);" onMouseout="hide_menu2(document.all.menu2);" style="left:60px">タグ2 | </span> <span id="tag3" onMouseover="show_menu(this, 3);" onMouseout="hide_menu2(document.all.menu3);" style="left:110px">タグ3</span> </div> <div id="menu1" class="menu" onclick="hide_menu(this);" onMouseout="hide_menu2(this);"> <a href="http://www.yahoo.co.jp" target="hoge_frame">Yahoo Japan</a><br> menu1 label2<br> menu1 label3<br> menu1 label4<br> <a href="http://www.goo.ne.jp/" target="hoge_frame">教えてgoo</a><br> <a href="http://www.livedoor.com/" target="hoge_frame">livedoor</a><br> <a href="http://www.yahoo.co.jp" target="hoge_frame">menu1 label1</a><br> </div> <div id="menu2" class="menu" onclick="hide_menu(this);" onMouseout="hide_menu2(this);"> menu2 label1<br> menu2 label2<br> menu2 label3<br> menu2 label4<br> </div> <div id="menu3" class="menu" onclick="hide_menu(this);" onMouseout="hide_menu2(this);"> menu3 label1<br> menu3 label2<br> menu3 label3<br> menu3 label4<br> </div> <iframe name="hoge_frame" style="width:100%;height:90%"> </body> </html>
その他の回答 (2)
- kappa_neko
- ベストアンサー率50% (14/28)
メニューが消えるタイミングは、 ・他のタグにマウスを乗せたとき ・メニューをクリックしたとき です。 iframeを入れてないですけど、これでいけるのでは? <html> <head> <style> .menu { position:absolute; display:none; width:200px; border:1px #000000 solid; background-color:#ffff99; padding:4px 4px 4px 4px; } </style> <script> var now =''; function show_menu(_elem, n){ // 今メニューを表示していたら、それを消す if(now != '' && now.style.display == 'block'){ now.style.display = 'none'; } left=_elem.style.left; with(document.getElementById('menu'+n)){ style.display = 'block'; style.left = left; } // 表示したメニューを保持 now = document.getElementById('menu'+n); } function hide_menu(_elem){ _elem.style.display = 'none'; } </script> </head> <body> <div> <span id="tag1" onMouseover="show_menu(this, 1);" style="left:10px">タグ1 | </span> <span id="tag2" onMouseover="show_menu(this, 2);" style="left:60px">タグ2 | </span> <span id="tag3" onMouseover="show_menu(this, 3);" style="left:110px">タグ3</span> </div> <div id="menu1" class="menu" onclick="hide_menu(this);"> <div>menu1 label1</div> <div>menu1 label2</div> <div>menu1 label3</div> <div>menu1 label4</div> </div> <div id="menu2" class="menu" onclick="hide_menu(this);"> <div>menu2 label1</div> <div>menu2 label2</div> <div>menu2 label3</div> <div>menu2 label4</div> </div> <div id="menu3" class="menu" onclick="hide_menu(this);"> <div>menu3 label1</div> <div>menu3 label2</div> <div>menu3 label3</div> <div>menu3 label4</div> </div> </body> </html>
お礼
ありがとうございます！ やってみたのですが、これ以外にも、メニューからマウスがはずれたときに（タグ以外の場所でも）消えるようにしたいのです。 始めのはそれはできるのですが、iframeの中だけは認識されずに、ずっとメニューが残ってしまいます。 なんとか方法はないでしょうか。 よろしくお願いします。
- kappa_neko
- ベストアンサー率50% (14/28)
ソースを見せてくれたら、的確なアドバイスがあげられると思うのでが。 >フレーム内などでマウスが外れた場合には認識されず フレーム分けをしていて、フレーム内のHTMLでそのスクリプトがうまく動作しないって事ですか? >クリックしたらポップアップが消えるようにしたいのですが 何処をクリックしたら?画像ですか? 画像だったら、その画像を表示させているタグ（imgタグですか?）のイベントを変えれば出来ると思いますよ。 「onMouseoutイベントをonClickイベントに変更」
お礼
同じページ内の下の方に<iframe>を使っていて、そちらの領域内でマウスが外れても認識されず、ポップアップが消えません。 ポップアウト以外のところでクリックしたときにポップアップが消えるようにしたいです。 アドバイスお願いしますm(_ _)m
補足
いただいたスクリプトはこちらです。こちらのサイトからいただきました。 http://www.interq.or.jp/japan/satoshi0/sample/index.htm <script language="JavaScript" type="text/javascript"><!-- //マウスが離れてからメニューが消えるまでの時間 1000で1秒 var hideDelay=1000; //ここから下は変更の必要なし var runable=(!document.getElementById)? (!document.all)? (!document.layers)? -1:1:2:3; var ie=(document.all)? true:false; var nowShowing="$"; var showedMenu=""; var onLayer=onLink=flgShow=0; var timerID=st=en=0; var mx=my=0; window.onload=function () { if (runable>1) document.onmousemove=function (event) {delayHideMenu(event) } } function getElm(name,style) {//HTMLオブジェクト取得 var doc=self.document; if (runable==2) var gobj=doc.all(name); //IE4+ else var gobj=doc.getElementById(name); //DOM if (style && runable>1) gobj=gobj.style; return gobj; } function showMenu(n,X,Y) {//メニュー表示 if (runable<2) return; var obj=getElm("menu"+n,1); var lnk=getElm("menuButton"+n); var lnks=getElm("menuButton"+n,1); nowShowing=n; //表示中のメニューがある場合、それを非表示にする if (showedMenu!="" && showedMenu!=nowShowing) hideMenu(showedMenu); if (obj.visibility=="visible" && onLink==1) return; lnk.onmouseout=leaveLink; onLayer=onLink=1; obj.left=X || parseInt(lnks.left); obj.top=Y || parseInt(lnks.top)+((runable==1)? lnk.clip.height:lnk.offsetHeight); obj.visibility="visible"; showedMenu=nowShowing; flgShow=1; clearTimeout(timerID); st=t(); } function leaveLink() {//リンクからマウスが離れた onLink=0; en=t(); } function delayHideMenu(e) {//メニューを非表示にするかどうか判定する１ mx=gmx(e); my=gmy(e); if (nowShowing=="$" || flgShow==0 || st==0) return; if (onLink==0 && checkPosition()) {//リンクとメニューからマウスが離れている en=t(); onLayer=0; hideMenu(); } else { st=t(); onLayer=1; clearTimeout(timerID); } } function hideMenu(n) {//メニューを非表示にするかどうか判定する２ clearTimeout(timerID); if (!n) { if (nowShowing=="$" || onLayer!=0) return; if (onLink==1) {//リンクにマウスが乗っている timerID=setTimeout("hideMenu()",hideDelay); st=t(); return; } else if (((en-st)%hideDelay)<hideDelay && st!=0) {//指定した時間が経過していない clearTimeout(timerID); timerID=setTimeout("hideMenu()",hideDelay); st=0; return; } else if (!checkPosition()) {//メニューにマウスが乗っている st=t(); return; } } //メニュー非表示 getElm("menu"+((n)? n:nowShowing),1).visibility="hidden"; showedMenu=""; onLayer=flgShow=0; } function checkPosition() {//マウスがメニューに乗っているかどうか判定 if (nowShowing=="$") return; var obj=getElm("menu"+nowShowing); var x=mx-((runable==1)? parseInt(obj.left):obj.offsetLeft); var y=my-((runable==1)? parseInt(obj.top):obj.offsetTop); var w=(runable==1)? parseInt(obj.clip.width):obj.offsetWidth; var h=(runable==1)? parseInt(obj.clip.height):obj.offsetHeight; if (onLink==0 && (x<=0 || y<=0 || x>=w || y>=h)) return true; return false; } function t() { return (new Date()).getTime(); } function gmx(e) {//マウス位置取得X if (ie) return document.body.scrollLeft+event.clientX; else return e.pageX; } function gmy(e) {//マウス位置取得Y if (ie) return document.body.scrollTop+event.clientY; else return e.pageY; } //--></script>
関連するQ&A
- フレームをこえるポップアップ
上下にフレームで分けたページを作っています。 上のフレームのボタンにマウスオンするとリンクがポップアップで下に表示されるスクリプトを手に入れたのですが、 そのポップアップがフレームのところできられてしまって表示されません。 ポップアップをフレームを超えて表示させるようにできますか？
- ベストアンサー
- JavaScript
- FC2 クリックポップアップ画像の方法について
http://rgrg.blog61.fc2.com/blog-entry-593.html 画像をクリックすると、そのページ上で画像が大きく表示されるJavaスクリプトツール を上記サイトのとおりやってみましたがポップアップがされません。画像サイズは480X360で、これをクリックすると元画像サイズの640X480をポップアップさせたいのです。 テンプレートは「lightframe_white」にしていますが、ダウンロードし直しても、また他のテンプレートにしてもやはりできません。 <script type="text/javascript"><!-- ： ： <link rel="index" href="<%url>archives.html" title="サイトマップ" /> ポップアップのスクリプトの上にはデフォルトで上記の記載がありますが、この中に改変しなくてはならない行があるのでしょうか？ ご教示の程よろしくお願いします。
- ベストアンサー
- ブログ
- ポップアップウィンドウを気付かせたい
小さな画像をクリックすると、 ポップアップウィンドウで大きな画像が見れる、というものを作りました。 DREAMWEAVERのビヘイビア→ブラウザウィンドウをクリックで開く、としたのですが、 これですとその画像をクリックしたら大きな画像が見れる、ということは一見分かりません。 普通のリンクですと、マウスが乗っただけでカーソルが変わるので リンクされていると分かりますよね？ そんな感じでカーソルが変わる等、分かりやすくする方法はないでしょうか？ 文字のポップアップ表示、もやってみましたが、気付きにくく、イマイチでした。 初心者なので、訳のわからない質問かもしれませんが、 ご教授頂けると嬉しいです。
- ベストアンサー
- CSS
- ポップアップ表示ができません。
ポップアップ表示ができません。 サイトでほかのリンクに新しいウィンドウで開こうとしても、開きません。 ポップアップは許可にしてます。 下に、「このページのポップアップがブロックされました。ポップアップの表示を許可するには Cｔｒｌキーを押しながらクリックします」とでますが、表示どおりにしても出てきません。 大変困っています。説明不足なら補足いたします。 どうかよろしくお願いいたします。
- ベストアンサー
- Windows 7
- マウスカーソルについてくるポップアップを消したい
ブラウジングの際、マウスカーソルの動きを止めると前にクリックしたリンク先のタイトルや内容がポップアップされ困っています。 カーソルのすぐ下に、白い背景に黒字で表示されます。 動かすと消えますが、ポップアップで関係のない長いタイトルや文章がたびたび表示されてストレスです。 また、サイトにタグで組み込まれているポップアップを表示することもできず、ずっと同じ内容が出てきます。 関係ないポップアップの表示は表示させず、サイトに組み込まれているポップアップのみを表示するようにしたいです。 ブラウザはFireFox 3.0.11を使用しています。 解決方法をご存じの方、よろしくお願いします。
- 締切済み
- ブラウザ
- ポップアップウインドウを開いて閉じる方法はありますか。
1：リンクを設定してマウスでクリックしたときにポップアップウィンドウを1つ開き、そのまま閉じずに放っておく。 2：別のリンクをクリックした時に、1：で開いたポップアップウインドウがすでに閉じているときは普通にポップアップウインドウを開いて、あらかじめ開かれている場合は、一旦閉じてから新たにポップアップウインドウを開く。 このようなことは可能でしょうか。 いろいろ試したのですが、とうとう行き詰ってしまいました。あつかましいですが、ソースをお願いできればと思います。
- 締切済み
- JavaScript
- ポップアップメニュー上でアクション
Javaアプレットのポップアップメニューに関する質問です。 マウスカーソルがポップアップメニュー上を移動するだけで、アクションを起こせるようにしたいのですがこのようなことは可能でしょうか？ また、ボタンをクリックするとパソコン内のHTMLファイルをブラウザで開けるように、つまりリンクを貼りたいのですが、これも教えていただけないでしょうか。
- 締切済み
- Java
- クリックによるポップアップが透明になりマウスで現れる
どこを触ったのか定かじゃありませんが、クリックするとポップアップの文字が映らずマウスを近づけると現れます。（例えば今まで右クリックで「コピー」を現してたのが透明なポップアップが現れマウスでなぞると文字が浮かんできます） 勿論左クリックでも同じのものもあります。WinXP-SP2です。よろしくお願いします。
- 締切済み
- Windows XP
- Sleipnirの「LINK先をポップアップ表示」について
ツール→Sleipnirのオプションでスクリプトを有効にしてメニューの「スクリプト」を選択して「LINK先をポップアップ表示」をクリックしても何も変化がありません。 ファイル内容に下記記述がありましたが、この内容だけでは意味不明です。 やり方後存知の方、教えて頂ければ幸いです。 （フィル内容） LINK全てにtitle=urlを設定します。 これによりマウスをLINKに合わせるだけでURLがポップアップされます
- ベストアンサー
- ブラウザ
- FireWorksでポップアップメニュー
FireWorksでポップアップメニューを作ったのですが、 これにリンクを張って、別フレームの内容をジャンプさせるように出来るのでしょうか。いまいちターゲットについてわかっていないようです。 また、フレームの中に表示させたのですが、フレームの大きさからあふれた分のポップアップメニューが表示されません。あくまで同じフレーム内にしか表示できないのでしょうか。 宜しくお願い致します。
- ベストアンサー
- グラフィックソフト
お礼
早速やってみました！できました！ すごすぎます（感動！） とっても助かりました、どうもありがとうございました！！