ベストアンサー

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

2004/08/18 15:48

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

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

JavaScript
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

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

ベストアンサー

nyanko_2003
ベストアンサー率40% (241/600)

2004/08/19 15:10 回答No.4

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

質問者

お礼 2004/08/19 16:05

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

質問者

補足 2004/08/19 17:52

表示・非表示の件については、以下のようにしてみたらできました。（見た目は）これであってるでしょうか？ <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)

nyanko_2003
ベストアンサー率40% (241/600)

2004/08/18 20:06 回答No.3

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

質問者

お礼 2004/08/19 09:51

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