• ベストアンサー

フレームをまたいでサブメニューを表示（JavaScriptで）

http://www.milonic.com/menu/frames/ のようなことがしてみたいのですが、どのようにしたらいいのでしょうか？ また、JavaScriptで、（ａ）という画像にマウスオーバーしたら（ｂ）という画像を動かす、ということができますが、このとき画像は、cssを使って位置指定で行いますよね？ 元の（ｂ）という画像を<img>で書くときも stype="position:… と指定しておかないとダメみたいですが、この指定をしない方法なんてあるのでしょうか？ それと（Ａ）という画像にマウスーオーバーしたら、今まで表示されていなかった（Ｂ）という画像を、指定の位置に表示、ということをするにはどうしたらいいのでしょうか？ 質問が多くなってしまいましたが、どれかひとつでも答えていただければ幸いです。 よろしくお願いいたします。

  • w-inty
  • お礼率72% (1169/1618)

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

  • ベストアンサー
回答No.4

こんにちは。 再び、#1です。 では、http://www.westin-osaka.co.jp/stay/index.html のサイトのソースを解析させて頂きました。 これを見ると、本当にソースが長いですね。 どうやら、独自のソースではなくてDreamweaverの機能を使ったメニューのようです。 私の使っているソースと違うので少し難儀しましたが、内容はわかりました。 ＞通常で言う「リンク」はどのように表示させたらいいのでしょうか →これのリンクとはボタンの事でしょうか？ それは、デフォルトで表示されている（ホームとか宿泊とか…）ボタンの事ですか？それとも、ロールオーバーした時に現れるボタンの事ですか？ もう少し詳しくお願いします。 ＞imageBasyo('sub01_02',170,52) こんな感じでイメージを表示させてるんですが、もともとのsub01は見えないような場所（2000,0）に表示してあるんです。 →んんん？これは何処を指していますか？ もしかして質問者様の作りたいページの中身のお話ですか？ ＞上記の方法だとスクロールバーが長くなってしまって困ってるんですが、普通はどういうふうにするんでしょうか？ →スクロールバーが長くなるとは、ソースの話ですか？ それとも表示される画面の話ですか？ ソースの場合だと、このJSの記述部分を全て外部jsにする事でソースの簡素化を計る事も可能です。 ＞表示させている画像のしたとかに隠しちゃったりするんでしょうか？ ＞白い何でもない画像を用意しておいてその下に隠すとか？ →このサイトを落としてきてご覧になったかと思いますが、ロールオーバーして初めて現れるメニュー部分は、ソース上では「出っ放し」なのはお判りですか？ それをjsで制御して、表示させる時に隠しています。 なので、特に画像で隠すとか白い何でもないのとか用意する必要はありません。 ごめんなさい、追加のご質問が良く理解できませんでした。補足をお願いします。 とにかく、ゆっくりこのサイトのソースを眺めてみる事をオススメします。

w-inty
質問者

お礼

回答ありがとうございます。 補足がよくご理解いただけなかったようですね。文が足りなくてすいません。 現在は 「ボタン１」 「ボタン２」 「ボタン３」 がデフォルトの状態で例えば、ボタン１にマウスオーバーすると、 「ボタン１」　「sub１」 「ボタン２」 「ボタン３」 と表示するようにしました。 それで「sub１」は普段はどこにいるかというと、（top:2000;left:0）のところにいるわけなんです。 通常なら見えませんが、スクロールしたらバレちゃいます。 ＞→このサイトを落としてきてご覧になったかと思いますが、ロールオーバーして初めて現れるメニュー部分は、 ＞ソース上では「出っ放し」なのはお判りですか？ ＞それをjsで制御して、表示させる時に隠しています。 すいません。落としてみたのは見たのですが、イマイチどの部分なのかわかりませんでした。 でも、上記の通りということは、普段は隠しておいて、マウスオーバー時のみ表示、ということができるのでしょうか？ 追加質問です。 「sub１」にマウスオーバーすると、文字が変わったりするようにしたいと思い、「sub１_b」という画像を用意しました。 「sub1」にマウスオーバーしたら「sub1_b」を表示、まではうまくいくのですが、「sub1_b」を表示させなくする、がうまくいきません。 方法１として、 「sub１」からマウスアウトしたら「sub1_b」を消す、としたのですが、消えたり消えなかったり、です。 また画像の上をマウスを動かすとチカチカします。 同じように「sub1_b」からマウスアウトしたら「sub1_b」を消す、という方法も試したのですが、こちらも結果は同じでした。 なぜこのような不安定な動作になるのでしょうか？

w-inty
質問者

補足

表示・非表示の件については、以下のようにしてみたらできました。（見た目は） これであってるでしょうか？ <script language="JavaScript"> function imageBasyo(imageName,x,y,hyoji){ document.images[imageName].style.left = x; document.images[imageName].style.top = y; document.images[imageName].style.visibility = hyoji; } </script> <body> onMouseOver="imageBasyo('sub01',150,20,'visible'); </body>

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

回答No.3

こんばんは。 ＃1です。 お礼拝見しました。 URLですが、見ましたところ、これは違います。 問題なのは「フレームをまたごうとする」からであって、このメニューの出し方は特に問題ありません。 まあ、JSの記述方法によっては、ネスケで効かなかったり…なんて事もありますが。 （このサイトのJSは、ネスケ4.7では少しかぶってしまっていましたが、7.1では正常に表示されていました。operaもOKです） なので、一旦フレームにするのは忘れて、同ページ内でメニューを出す所から勉強されては如何でしょうか？ 一番いいのは、このページを保存させて頂いて（勉強の為です）、不必要の個所を排除していけば、メニューの部分のみ残りますよね。 それを、ご自分のサイトのメニューに当てはめていくんです。そうすれば「ソースのどの部分が該当個所か」を理解できて、楽しいですよ♪ いいサイトを作ってくださいね。

w-inty
質問者

お礼

回答ありがとうございます。 あっ！なるほど！ これ、フレームじゃなくて、ボタン押すごとにページ自体が動いてるんですね。 一つ質問させてください。 それらしいメニューは作成できたのですが、FLASHで言うところのボタン、通常で言う「リンク」はどのように表示させたらいいのでしょうか？ onMouseOverで imageBasyo('sub01_02',170,52) こんな感じでイメージを表示させてるんですが、もともとのsub01は見えないような場所（2000,0）に表示してあるんです。 で、そこ自体に <A HREF=""><IMG SRC="" NAME="sub01" STYLE="" ></A> としてあるんですが、この方法でいいのでしょうか？ また、上記の方法だとスクロールバーが長くなってしまって困ってるんですが、普通はどういうふうにするんでしょうか？ 表示させている画像のしたとかに隠しちゃったりするんでしょうか？ 白い何でもない画像を用意しておいてその下に隠すとか？ 何かいいアイディアあったら教えてください。

全文を見る
すると、全ての回答が全文表示されます。
  • nota55
  • ベストアンサー率37% (138/366)
回答No.2

>http://www.milonic.com/menu/frames/ >のようなことがしてみたいのですが、どのように >したらいいのでしょうか？ そのサイト上で，サンプルまで用意してくれてるじゃないですか。。。。

参考URL：
http://www.milonic.com/menu/frames/
w-inty
質問者

お礼

回答ありがとうございます。 あ、サンプルあったんですね、気づきませんでした（＾＾； でもサンプルだけじゃどうしてもわからないので質問させていただきましたm（＿＾＿）m

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

こんにちは。 私も作ったことが有りますが、制限多いですよ…。 ここで説明するのも大変なので、こちらをご参考にしてください。 http://mugi.cc/muginavi/mnframe.htm 更に判らないことが有りましたら、補足ください。

参考URL：
http://mugi.cc/muginavi/mnframe.htm
w-inty
質問者

お礼

回答ありがとうございます。 …どうやらいろいろ制限があるようですね。 例えば http://www.westin-osaka.co.jp/stay/index.html もそのようなことをしているのでしょうか？

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 簡単なJavaScriptなんですが

    セル内にボタン（menu01.gif)があって、マウスオーバーしたら別の画像(menu02.gif)に変わり、クリックたら別のファイルに飛ぶ、というJavaScriptを教えてください。 Dreamweaver３で作ったら、OnClickの設定ができずマウスオーバーしただけでURLに飛んでしまうのですがどう直していいのか分からないのでよろしくお願いします。 <td> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','img/menu02.gif',1);MM_goToURL('parent','index.html');return document.MM_returnValue"> <img src="img/menu01.gif" width="167" height="20" border="0" name="Image10"> </a> </td>

  • プルダウンメニューを作りたい

    　javascriptに関して、ほとんど知識がないのですがトップページの メニュー部分を最近よく使われている、プルダウン形式にする様に 依頼されました。 その仕様としては、 オンマウスになったときに、隠されているメニューが表示され、なおかつ ロールオーバーで画像がきりかわり、 マウスオーバーになったときには、また隠れる。 といったものです。いろいろと方法はあるかと思いますが、 <SCRIPT LANGUAGE="JavaScript" SRC="./common/fw_menu.js"></SCRIPT> と、外部ファイルfw_menu.jsを読み込むようにして、fw_menu.jsに は function fwLoadMenus() { if (window.fw_menu_0) return; window.fw_menu_1 = new Menu("root",324,35,"Osaka, MS UI Gothic",12,"","","",""); fw_menu_1.addMenuItem("<A HREF='./topics/index.html' onMouseOver='changeImage('pto01', './img/body-btn-pto01_over.gif');' onMouseOut='changeImage('pto01', './img/body-btn-pto01.gif');'><IMG NAME='pto01' SRC='./img/body-btn-pto01.gif' WIDTH='90' HEIGHT='37' BORDER='0'></A><BR>",""); fw_menu_1.hideOnMouseOut=true; fw_menu_1.writeMenus(); } // fwLoadMenus() と切り替わる画像とそのロールオーバーを記述しました。 結果、オンマウスした時に、指定した座標位置に画像body-btn-pto01.gifはきちんと表示されるのですが、ロールオーバーが作動しません！！ おそらく↑の記述にミスがあると思うのですが、その原因がつかめず朝に なってしまいました。。。。　 どなたか、javascriptに詳しいかた、↑の記述の間違いを私に教えて下さい。　どうか、よろしくお願い致します。

  • IE6で透過pngを表示させる方法

    いつもお世話になっています。 マウスオーバーで画像Aの上に画像Bが表示されるというjavascriptを作りました。画像BはAに重なるので、 http://allabout.co.jp/internet/hpcreate/closeup/CU20040510A/ で教えてもらったposition: relative;、position: absolute;のCSSを使って配置し、javascriptでマウスオーバー・アウトさせています。 無事うまくいったのですが、Bが透過pngなので、IE6で表示が乱れます。そこでこちらで似たような質問を検索し、http://www.koikikukan.com/archives/2007/08/14-015513.php のpngfix.jsを使うのだと知りました。 早速ダウンロードし、htmlのheadに <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> を書き、htmlと同じ階層にpngfix.jsをアップロードしましたが、全然ダメでした。何を間違ってるんでしょうか？自分でもしや？と思うことは ・position: relative;、position: absolute;　を使っている ・画像Aの上にBがマウスオーバー・アウトするjavascriptは外部ファイルにしている ・IE6のスタンドアローン版でチェックした(ただこれは正規のIE6を使用している人に見てもらってやはり透過していないと確認済です) 以上です。制作環境はWinXP、Dreamweaver8です。 このpngfix.jsを使用する方法がダメだったらjavascriptで作っている部分をFLASHで作り直すしかないと思っていますが、透過pngはFLASHであればIE6でも表示されるのでしょうか？ 長くなりましたが、お知恵をお貸りできれば助かります！知識がなくすみません…。

    • ベストアンサー
    • CSS
  • JavaScriptのメニューを作れるソフト

    最近、WEBページのメニューで、マウスオーバーイベントで 新しいメニューが開く、という仕掛けをよく見ます。 レイヤを使ってるやつです。Microsoftのページだと 左側のメニューで▲が付いてるのがそれなんです。 http://www.microsoft.com/japan/ 自分のWEBでも、よそのWEBサイトのJavaScriptのコード を参考に同じようなメニューを以前作成してみました。 しかし手でJavaScriptを書くのはかなり面倒なのと 表示位置を変えるのがすごく面倒です。 これらレイヤを使って、マウスのイベントで開くメニュー を作成できるWindows用ソフトはあるのでしょうか？ あれば購入してもいいかな・・と最近考えています。 アドバイスなどいただけたら幸いです。

  • マウスを乗せるとメニュー表示

    フレームを使ったメニューで、マウスを乗せるとサブメニューが出ると言うスクリプトを探しています。 いくつか見つけることが出来たのですが、メニューの位置が絶対位置指定で直すのが難しく。。。 フレームに画像でメニュー、マウスを乗せるとサブメニューが出て、離すと消える、と。 サブメニューの位置は、マウスの位置によって変わるんではなく、メニューの位置に対してどの位置に表示される、と言うのが望ましいです。メニューからにゅっとサブメニューが現れると言うか…（マウスを乗せるたびにアチコチ変な位置に出るのはうっとおしいかと思うので） 説明が下手で判りづらいかもしれませんが、宜しくお願いします。 IE、ネスケ等にちゃんと対応してくれてるとありがたいです（って言うかぢゃないと困るカモ。。。）

  • USEMAPでの指定区域にマウスオーバー→画像popup、クリックで別窓映像表示させる記述

    USEMAPでエリア指定した（画像の）一部にマウスオーバーした時に、補足説明画像をポップアップさせる方法はありますでしょうか？ 従来はCSSの処理で、一つの画像にマウスオーバーした時に下記【１】の手順で別の説明用画像をポップアップ表示する処理が出来ているのですが、（通常はhidden,マウスオーバーでvisible） 今回【２】のようなUSEMAPで指定した（大きな画像の）一部のEREA指定部にマウスがオーバーした時点でポップアップ出来れば良いなあ…と、質問させていただきました。 教えていただければうれしいです。よろしくお願いします。<(_ _)> ちなみに、USEMAPを使う理由ですが、当該画像エリア部をクリックすると対応したビデオ映像が別窓で表示されるようにしています。 この動作は必要ですのでご配慮ください。 なお、ALT属性は画像が使えません。 よろしくお願いします。 ------------------------------------------------------- 【１】 <HEAD> .popup01 A { POSITION: relative } .popup01 A IMG.message { LEFT: -50px; VISIBILITY: hidden; WIDTH: 250px; POSITION: absolute; TOP: -50px; HEIGHT: 42px } .popup01 A:hover { VISIBILITY: visible } .popup01 A:hover IMG.message { VISIBILITY: visible } </HEAD> <BODY> <A href="001.jpg" ALT="*" BORDER="0"><IMG class=message src="popup001.gif" border=0></A> </BODY> ------------------------------------------------------- 【２】 <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function sub_open_movie01(){ window.open("./movie-con01.html",""," width=600,height=550,left=50,top=50,menubar=yes,scrollbars=yes"); } //--> </HEAD> <BODY> <img src="002.jpg" USEMAP="#UserMapName"> <MAP NAME="UserMapName"> <AREA SHAPE="RECT" COORDS="10,10,50,50" HREF="javascript:sub_open_movie01();"> </MAP> </BODY> ------------------------------------------------------- 記述はCSS,Javascript等いずれでも結構ですので、マウスオーバーでポップアップ→マウスアウトで消え、クリックで別窓映像表示してくれればうれしいです。 単一の画像に対して（マウスオーバー・アウト）の記述はネットで検索するとたくさん教えてもらえるのですが、USEMAP中での処理に関して（マウスオーバー・アウトとクリックで）各々別の動作（画像表示ON,OFFと別窓表示window.open）をするような解説は見つけられませんでした。 よろしくお願いします！<(_ _)>

  • こんなJavaScript探してます！

    はじめまして。 早速ですが、下記のようなジャバスプリクトを探しています。 ------------------------------------------- ┌──────────┐　 │　　　　　　　　　　　　　　　 │ │　　　　Ａ　　　　　　　　　　 │ └──────────┘　←４枚とも画像です。 ┌─┐┌─┐┌─┐ │ １││２ ││３ │　 └─┘└─┘└─┘　　 １の画像にマウスオンすると、１とＡの画像が別の画像が表示され（すり替えられ）尚且つ１をクリックで別ページにジャンプ。 １※　１・２・３ともリンク先は異なる ２※　マウスオーバー時に表示される画像は1とAとでは異なる ３※　２・３も同様の機能がある ------------------------------------------- 探してみたところ http://bunjin.com/java/change_img0.htmlが近いように思えますが、 このスプリクトを応用してできるでしょうか？ JavaScriptでなくても、こんな方法で出来る等、お教え頂ければ幸いです！ 宜しくお願い致します。

  • JavaScriptでの画像ロールオーバーについて教えて下さい。

    非常に初歩的な事で申し訳ありません。 サイトのメニュー部分の画像をJavaScriptでマウスオーバー時に切替たいのですが、うまくいきません。 IE6とOpera9ではすべて表示できたのですが、Firefox1.5では一部の画像だけ切り替えられませんでした。 原因が分からず困っています。 function chImg(img, str){ document.images[img].src = str;} よろしくお願いします。

  • Javascriptのマウスオーバー

    Javascriptでのマウスオーバーで、Mapを使って画像上に範囲指定しているリンク範囲にボーダーを表示させたいと考えています。 HTMLは、 <html> <head> <title></title> </head> <body> <img src="aaa.gif" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="78,200,228,241" href="bbb.html"> <area shape="rect" coords="326,168,476,209" href="ccc.html"> <area shape="rect" coords="78,141,228,182" href="ddd.html"> </map> </body> </html> このようになっています。 この状態で、マウスオーバー時にリンク範囲をボーダーで囲みたいと思っています。 JavascriptやCSSとの組み合わせ等でいろいろ探してみたのですが、どうしても上手くいきませんでした。どうしたらいいのか教えて下さい。 また、JavascriptやCSSでなくとも同じ事が出来るのでしたら、それで構いません。 どうか宜しくお願い致します。

  • javascriptで画像を表示する

    javascriptで画像を表示した際に、表示したimgにCSSのidを付与したいのですが、以下のようにしても画像にidはつきませんでした。 document.write("<img src='images/image.jpg' id='example'>"); 一部の画像のみにスタイルを適用したいので、画像それぞれに異なるidを与えたいのですが、javascriptで表示させる場合のやり方がわかりませんでした。 どうやってidを割り当てるのか教えてください。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する