- ベストアンサー
ポップアップをクリックで終了させる方法
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>
お礼
早速やってみました！できました！ すごすぎます（感動！） とっても助かりました、どうもありがとうございました！！