- ベストアンサー
フレームをまたいでサブメニューを表示（JavaScriptで）
http://www.milonic.com/menu/frames/ のようなことがしてみたいのですが、どのようにしたらいいのでしょうか？ また、JavaScriptで、（ａ）という画像にマウスオーバーしたら（ｂ）という画像を動かす、ということができますが、このとき画像は、cssを使って位置指定で行いますよね？ 元の（ｂ）という画像を<img>で書くときも stype="position:… と指定しておかないとダメみたいですが、この指定をしない方法なんてあるのでしょうか？ それと（Ａ）という画像にマウスーオーバーしたら、今まで表示されていなかった（Ｂ）という画像を、指定の位置に表示、ということをするにはどうしたらいいのでしょうか？ 質問が多くなってしまいましたが、どれかひとつでも答えていただければ幸いです。 よろしくお願いいたします。
- w-inty
- お礼率72% (1169/1618)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- nyanko_2003
- ベストアンサー率40% (241/600)
こんばんは。 ＃1です。 お礼拝見しました。 URLですが、見ましたところ、これは違います。 問題なのは「フレームをまたごうとする」からであって、このメニューの出し方は特に問題ありません。 まあ、JSの記述方法によっては、ネスケで効かなかったり…なんて事もありますが。 （このサイトのJSは、ネスケ4.7では少しかぶってしまっていましたが、7.1では正常に表示されていました。operaもOKです） なので、一旦フレームにするのは忘れて、同ページ内でメニューを出す所から勉強されては如何でしょうか？ 一番いいのは、このページを保存させて頂いて（勉強の為です）、不必要の個所を排除していけば、メニューの部分のみ残りますよね。 それを、ご自分のサイトのメニューに当てはめていくんです。そうすれば「ソースのどの部分が該当個所か」を理解できて、楽しいですよ♪ いいサイトを作ってくださいね。
お礼
回答ありがとうございます。 あっ！なるほど！ これ、フレームじゃなくて、ボタン押すごとにページ自体が動いてるんですね。 一つ質問させてください。 それらしいメニューは作成できたのですが、FLASHで言うところのボタン、通常で言う「リンク」はどのように表示させたらいいのでしょうか？ onMouseOverで imageBasyo('sub01_02',170,52) こんな感じでイメージを表示させてるんですが、もともとのsub01は見えないような場所（2000,0）に表示してあるんです。 で、そこ自体に <A HREF=""><IMG SRC="" NAME="sub01" STYLE="" ></A> としてあるんですが、この方法でいいのでしょうか？ また、上記の方法だとスクロールバーが長くなってしまって困ってるんですが、普通はどういうふうにするんでしょうか？ 表示させている画像のしたとかに隠しちゃったりするんでしょうか？ 白い何でもない画像を用意しておいてその下に隠すとか？ 何かいいアイディアあったら教えてください。
- nota55
- ベストアンサー率37% (138/366)
>http://www.milonic.com/menu/frames/ >のようなことがしてみたいのですが、どのように >したらいいのでしょうか？ そのサイト上で，サンプルまで用意してくれてるじゃないですか。。。。
お礼
回答ありがとうございます。 あ、サンプルあったんですね、気づきませんでした（＾＾； でもサンプルだけじゃどうしてもわからないので質問させていただきましたm（＿＾＿）m
- nyanko_2003
- ベストアンサー率40% (241/600)
こんにちは。 私も作ったことが有りますが、制限多いですよ…。 ここで説明するのも大変なので、こちらをご参考にしてください。 http://mugi.cc/muginavi/mnframe.htm 更に判らないことが有りましたら、補足ください。
お礼
回答ありがとうございます。 …どうやらいろいろ制限があるようですね。 例えば http://www.westin-osaka.co.jp/stay/index.html もそのようなことをしているのでしょうか？
お礼
回答ありがとうございます。 補足がよくご理解いただけなかったようですね。文が足りなくてすいません。 現在は 「ボタン１」 「ボタン２」 「ボタン３」 がデフォルトの状態で例えば、ボタン１にマウスオーバーすると、 「ボタン１」 「sub１」 「ボタン２」 「ボタン３」 と表示するようにしました。 それで「sub１」は普段はどこにいるかというと、（top:2000;left:0）のところにいるわけなんです。 通常なら見えませんが、スクロールしたらバレちゃいます。 ＞→このサイトを落としてきてご覧になったかと思いますが、ロールオーバーして初めて現れるメニュー部分は、 ＞ソース上では「出っ放し」なのはお判りですか？ ＞それをjsで制御して、表示させる時に隠しています。 すいません。落としてみたのは見たのですが、イマイチどの部分なのかわかりませんでした。 でも、上記の通りということは、普段は隠しておいて、マウスオーバー時のみ表示、ということができるのでしょうか？ 追加質問です。 「sub１」にマウスオーバーすると、文字が変わったりするようにしたいと思い、「sub１_b」という画像を用意しました。 「sub1」にマウスオーバーしたら「sub1_b」を表示、まではうまくいくのですが、「sub1_b」を表示させなくする、がうまくいきません。 方法１として、 「sub１」からマウスアウトしたら「sub1_b」を消す、としたのですが、消えたり消えなかったり、です。 また画像の上をマウスを動かすとチカチカします。 同じように「sub1_b」からマウスアウトしたら「sub1_b」を消す、という方法も試したのですが、こちらも結果は同じでした。 なぜこのような不安定な動作になるのでしょうか？
補足
表示・非表示の件については、以下のようにしてみたらできました。（見た目は） これであってるでしょうか？ <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>