• ベストアンサー

マウスアウトでサブウィンドウを閉じる

ホットスポットのマウスオーバーでサブウィンドウを開き、マウスアウトでそのウィンドウを閉じたいのですが、マウスアウト時にエラーになります。 ホットスポットには <area shape="rect" onMouseOver="javascript: openWindow2()" onMouseOut="javascript: closeWindow2()">のように記述し、JAVASCRIPTは以下のように記述しています。 <script language="javascript"> function openWindow2() { window.open("date.htm","window5","WIDTH=475,HEIGHT=430"); } function closeWindow2() { window5.close(); } </script> どこを直せば正常に動くようになるでしょうか。

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

  • ベストアンサー
  • Joh_Taka
  • ベストアンサー率76% (222/292)
回答No.3

既に#1さんが解答を示されておりますが、まだ質問を締め切っておりませんでしたので、一応念のため・・。 openWindow2() と closeWindow2() の関数間の矛盾を修正(欠落部分の追加を)すれば良いと思います。 そのままテキストエディタにCopy&Pasteして、動作チェック出来るように、<map> ではなく文字列から呼び出し、画面の左から200pixelの位置に window5 を表示させた場合の一例として・・・ <html> <head> <title></title> <script type="text/javascript"> <!-- function openWindow2(){ popwin=window.open("date.htm","window5","width=475,height=430,left=200"); } function closeWindow2(){ popwin.close(); } --> </script> </head> <body> <a href="#" onmouseover="openWindow2()" onmouseout="closeWindow2()">この場ではテキストで代行です</a> </body> </html> もちろん、<map> でも正常に動作するはずです。

chrnuts
質問者

お礼

わかりやすい説明で、大変感謝しています。ありがとうございました。

その他の回答 (2)

回答No.2

windowを開く動作はどうしても時間がかかってしまいます。 onMouseOverイベントは良いのですが、 onMouseOutイベントがwindowが生成(表示)される前に発生してしまうと、 closeWindow2() 関数で新しいwindowを探せなくなってしまいます。 条件はありますがポップアップや、 <div>タグレイヤーを使用してみるのはいかがでしょうか? 又、予断ですが関数名の最後に「2」と付けるのは、保守情欲ないかもしれませんね。

chrnuts
質問者

お礼

なるほどー。参考になりました。 >又、予断ですが関数名の最後に「2」と付けるのは、保守情欲ないかもしれませんね。 特に気にせず今まで使ってきました。これから気をつけるようにします。ありがとうございます。

  • todo36
  • ベストアンサー率58% (728/1234)
回答No.1

window5 = window.open( ..

関連するQ&A

  • サブウィンドウの大きさを複数設定するには?

    こんにちは。 私の知っているスクリプトだと、一つの固定の大きさでのみサブウィンドウが表示されるので、それぞれのサブウィンドウの大きさを別々に指定したいのですが、どのように記述すれば表示可能でしょうか?大きい方に合わせてしまうと、小さい方が余白が大きすぎてデザイン的にあまり綺麗ではありません。 IE4.0/NN4.0以上対応のスクリプトをお願いします。 やりたい事。 画像をロールオーバーさせ、クリックした時になおかつポップアップでサブウィンドウを表示させる。(その時表示させるページの大きさに合わせ、ウィンドウサイズも変えたい) 既にやっている事。 画像をロールオーバーさせ、固定の大きさではポップアップでサブウィンドウも表示できている。 使用しているソース。 (head部分) <SCRIPT language="JavaScript"> <!-- function openwindow(url,target) { window.open(url,target, "scrollbars=yes,toolbar=no,location=no,status=yes,menubar=no,width=650,height=700") } // --> </SCRIPT> (body部分) <a href="javascript:openwindow('mariko/profile.html','pop_up')" onMouseOver="changeImage('botanb_2.gif', 'botan2','mojij_2.gif', 'moji2')" onMouseOut="changeImage('botanp_2.gif', 'botan2','mojie_2.gif', 'moji2')"><img src="images/botanp_2.gif" width="66" height="80" name="botan2" border="0"></a> よろしくお願いします。

  • 画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウ

    画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウスオーバーがフェードで切り替わるということはできないでしょうか? 画像にエリア指定をしてマウスオーバーすると画像が変わるということはできたのですが その画像の切り替えをフェードでできないでしょうか 問題のコードです <script>function over(num){ document.getElementById("mg").src="site02/ex/ex_top03"+num+".jpg" } function out(){ document.getElementById("mg").src="site02/ex/ex_top03.jpg" } </script> <div id="main_content_ex"> <img id="mg" src="site02/ex/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/lightbox/ex.htm" onmouseover="over(1)" onmouseout="out()"> <area shape="rect" coords="582,468,790,496" onmouseover="over(2)" onmouseout="out()"> <area shape="rect" coords="800,465,932,493" onmouseover="over(3)" onmouseout="out()"></div> jQueryなどのフェードのエフェクトを使用しようかとも思ったのですが、javascriptでmouseOverの画像を指定しているためどう書いていいかわからなくなってしまいました こういう質問のしかたで大変恐縮なのですが 誰かご教授願えないでしょうか?? scriptもjQueryも基本を理解できておらず、大変困っています。 大変申し訳ありませんが、お願いいたします。

  • ページを表示すると同時に複数のサブウィンドウを開く方法について

    ページを表示すると同時に複数のサブウィンドウを開く方法について、 プログラムを作成したらよいのか教えてください。 下記のプログラムは、ページを表示すると同時に1枚のサブウィンドウを開くプログラムですが、3枚ほどサブウィンドウを開きたいのです。 よろしくお願い致します。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // サブウィンドウの表示方法を指定する function openWindow1() { window.open("sample.html","OpenWindow",scrollbars=no,location=no,menubar=no,toolbar=no, status=no,directories=no,resizable=no"); } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="openWindow1()"> </BODY> </HTML>

  • JavaScriptの表示についておねがいします。

    JavaScriptで、以下のスプリクトのページを表示する部分を10秒ごとにしたいのですがどなたか教えて頂けないでしょうか?出来れば、追記して回答お願いします。 <html> <body> </scr ipt> </head> <body onLoad="openWindow1()"> <a href="javascript:openWindow1();">web表示</a> <SCRIPT language="JavaScript"> <!-- // サブウィンドウの表示方法を指定する function openWindow1() { window.open("http://yahoo.co.jp/","1"); window.open("http://www.google.co.jp/","2"); window.open("http://ja.wikipedia.org/wiki/メインページ","3"); } //--> </SCRIPT> </body> </html>

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

    是非教えてください。 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ページによりとじられようとしています。このウィンドウを閉じますか?」のメッセージが出ます。 マウスアウトの時には、子ウインドウだけを閉じたいのですが、どのように記述したらいいですか?

  • 外部JSでサブウィンドウを設定する場合

    サブウィンドウの設定についてご質問いたします。 親ウィンドウの中の画像をクリックしてサブウィンドウを開くと言う設定をしたいのです。 親ウィンドウにある画像は2つでそれぞれ開くサブウィンドウの大きさは異なります。 まずsample.jsを作り function subopen1(){ window.open("××.html","subwin1", "width=450,height=450,toolbar=no,scrollbars=no,left=15,top=5") } function subopen2(){ window.open("××.html","subwin2", "width=500,height=450,toolbar=no,scrollbars=no,left=15,top=5"); } と記述しました。 そして<HEAD>~</HEAD>に <script type="text/javascript" src="sample.js"></script> 続いて<BODY>~</BODY>には <A href="javascript:subopen1()"><IMG src="××1.gif" width="100" height="120" alt="Click"></A> <A href="javascript:subopen2()"><IMG src="××2.gif" width="100" height="120" alt="Click"></A> と記述したのですが 「オブジェクトを指定して下さい」とエラー表示され実行出来ません。 上記に修正箇所があったら教えて下さい。 又別な方法でも構いませんのでサブウィンドウの設定が出来れば教えて頂きたいと思います。 どうか宜しくお願い致します。ペコ↓m(_ _;)m↓ペコ

  • リンクをマウスオーバーでフェードイン・アウトがしたです。

    リンクをマウスオーバーでフェードイン・アウトがしたです。 以下のようなソースを書いたのですが、ページを開いた1回目のみ、画像と文字がフェードインして、以下のリンクをマウスオーバーした時には、普通に画像と文字が入れ替わります。リンクをマウスオーバーした時にもフェードイン・アウトさせるには、どのように変更すればいいのでしょうか? <html> <head> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('div').fadeIn("slow"); }); </script> <head> <body> <div style="display:none;"> <img src="img/1.png" name="foo"> <br> <span id="buntate">眺める</span> </div> <a href="javascript:void(0)" onmouseover="document.foo.src='img/2.png';document.all.buntate.innerText='サーファー';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge1</a> <br> <a href="javascript:void(0)" onmouseover="document.foo.src='img/3.png';document.all.buntate.innerText='海';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge2</a> </body> </html> 沢山いろいろと試したのですが、自分で解決出来ず・・・ ごご教授、よろしくお願いいたします。

  • 【FireFox】サブウィンドウ表示とテキストボックス値

    メインのウィンドウにテキストボックスとボタンがあり、 ボタンをクリックするとjavascriptによりサブウィンドウ が開くHTMLがあります。 しかし、FireFoxに限り、ボタンを押してサブウィンドウ を開くとメインのHTMLのテキストボックスに入力していた 値が消えてしまいます。 ================ main.html ===================== <html> <head> <script Language="JavaScript"><!-- function openSubWin(){ window.open("sub.html","window","width=300,height=300"); } // --></script> </head> <body> <form action="#" name="myform"> <input type="text" name="no"> <button id="button1" onclick="openSubWin();" >サブウィンドウ</button> </form> </body> </html> ================== サブウィンドウ ================ <html> <body> サブウィンドウ </body> </html> IEでは問題ありませんでした。 何か解決方法はありますでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 同じ項目で

    こんにちは。 JavaScriptを使ってHPを作っているのですが、「OnMouseOver」と「OnMouseOut」と使ったスクリプトがそれぞれ二つづつあり、 <img src="~" OnMouseOver="○○" onMouseOut="○○" onMouseOver="□□" onMouseOut="□□"> と言うように書いても、前のものしか反映されません。 両方とも使いたい場合の記述方法はありますか? 初歩的なことかもしれませんがここでつまづいてしまって…。 よろしくお願いします。

  • サブウィンドウ

    JavaScriptの得意な方、知っている方に質問です。 下記のように指定した場所をクリックすると、サブウィンドウが表示されますが、そのサブウィンドウの高さと幅は自動的にしたいです。 その方法を存知であれば教えてください。 <script Language="JavaScript"> <!-- subWin = new Array(); swNum = new Array(); function openSW(sURL,sID) { swName = "subwindow"+sID; subWin[sID] = window.open(sURL,swName,"width=400,height=700"); swNum.unshift(sID); for (i=swNum.length-1; i>=0; i--) { if ( isFinite(swNum[i]) && subWin[swNum[i]]) subWin[swNum[i]].focus(); } } // --> </script> <a href="javascript:openSW('ファイル名',0)"><U>テスト</U></a> よろしくお願いします。

専門家に質問してみよう