ベストアンサー

フレームをまたいで背景画像を表示させたい

2005/05/27 22:39

　現在作っているホームページで、フレームでメニュー部分(フレームAとします)と、本文を表示させる部分(フレームB)を分けたページを作っているのですが、Aの各メニュー項目をonMouseOverするとBの背景画像がそれぞれそのメニュー項目に対応したものに変わる、という事をしたいのです。　できれば、その背景画像が変わるのはBに表示させるある1ページに限りたいのですが、何かうまい方法はないでしょうか? 　良いアドバイスがあったらご教授をよろしくお願いします。

yuki1011
お礼率57% (4/7)

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

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

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

ベストアンサー

kokorone
ベストアンサー率38% (417/1093)

2005/06/01 23:44 回答No.3

以下のソースをテストするため、少し時間がかかってしまいました。このような動きでよろしいでしょうか？ ★frame.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD><TITLE>Frame Test</TITLE></HEAD> <FRAMESET COLS="30%,*"> <FRAME SRC="frame_a.html" NAME="frm_a"> <FRAMESET ROWS="100%,*"> <FRAME SRC="frame_b.html" NAME="frm_b"> </FRAMESET> </FRAMESET> </HTML> ★frame_a.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <script language="javascript">  </script> </HEAD> <A HREF="frame_a.html" onclick="parent.frm_b.document.location.href='inf_hokkaido.html';" onmouseover="change_image('Winter.jpg');"> 北海道</A> <A HREF="frame_a.html" onclick="parent.frm_b.document.location.href='inf_aomori.html';" onmouseover="change_image('Sunset.jpg');"> 青森</A> <A HREF="frame_a.html" onclick="parent.frm_b.document.location.href='inf_iwate.html';" onmouseover="change_image('Water lilies.jpg');"> 岩手</A> </HTML> ★frame_b.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> </script> </HEAD> <BODY style="background-image:url('Sunset.jpg');background-repeat:no-repeat;background-position: left bottom"> <B> testテスト </B> </BODY> </HTML> ★inf_hokkaido.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> </script> </HEAD> <BODY style="background-image:url('Sunset.jpg');background-repeat:no-repeat;background-position: left bottom"> <B> ほっかいどう北海道 </B> </BODY> </HTML> ★inf_aomori.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> </script> </HEAD> <BODY style="background-image:url('Sunset.jpg');background-repeat:no-repeat;background-position: left bottom"> <B> あおもり青森 </B> </BODY> </HTML> ★inf_iwate.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> </script> </HEAD> <BODY style="background-image:url('Sunset.jpg');background-repeat:no-repeat;background-position: left bottom"> <B> いわて岩手 </B> </BODY> </HTML>

質問者

お礼 2005/06/02 20:25

まさに思っていた通りの動きです！ありがとうございました。迷惑ついでにもう一つ教えていただきたいのですが、functionの中にある、「return false」は、どういう働きをするのでしょうか?　たまにサンプル集等でも見かけますけど、いまいちこの意味が分からないのです。

その他の回答 (3)

kokorone
ベストアンサー率38% (417/1093)

2005/06/02 23:05 回答No.4

OnMouseOverとか、OnClickとか、OnChange とか、イベントを検出して何かをする場合、 return false; と記入すると、それ以降、これらのイベントを無効にしてしまう、おまじないです。今回は特に意味はないようですが、submit で画面遷移するような場合、エラーチェックで引っかかった場合、 return false; とすれば、画面遷移が無効になるのです。

質問者

お礼 2005/06/07 05:29

なるほど、ありがとうございました！助かりました＾＾

kokorone
ベストアンサー率38% (417/1093)

2005/05/28 20:49 回答No.2

メニュー項目(1からｎ)ある中で、JavaScriptにその番号を渡し、番号によって、フレームＢの処理を行うようにすれば、特定メニューだけ、背景画像することも可能ですよね。

質問者

お礼 2005/05/29 17:04

ありがとうございます。やってみます。　プログラムは家に持ってこれないので、まだ他に疑問があるかどうか分からないですが、やっていく中で解決できない事がおきましたら、また質問させていただきます。その時もどうかよろしくお願いします

質問者

補足 2005/06/01 19:14

間を空けて申し訳ありません。出来ない事が出てきたので補足したいと思います。　まず、背景画像をonmouseoverで表示させる事は出来たのですが、背景画像をスタイルシートでの設定のように、例えば、画像を繰り返さずに一枚だけ左下に固定して表示、などと言うのは出来るのでしょうか？　後、特定ページだけにそのjavaスクリプトを適用させると言うのがうまくいきません。ソースはないのですが、 if(parent.表示先のフレーム名.location.href=="適用させたいページ.html"){parent.表示先のフレーム名.body.style.background.src="表示したい背景画像";} と言うふうな感じでページ指定しています。が、「parent.表示先のフレーム名.はnull又はオブジェクトではありません」とエラーが出てしまいます。　ちなみにそのjavaスクリプトを適用させたいページはAのメニュー項目にはない、HPをひらいて最初にBに表示されるページです。そのページには各ページの「homeへ戻る」ボタンからしかいけません。　どうかよろしくお願いします

kokorone
ベストアンサー率38% (417/1093)

2005/05/27 23:08 回答No.1

後半部分が、よくわかりませんが、参考ＵＲＬのサンプル２７がヒントになるかもしれませんね。

参考URL：: http://www.usagi-js.com/sample/jssample6.htm

質問者

補足 2005/05/28 10:28

分かりづらい表現ですみません＾＾；アドバイスありがとうございます。ソースを見ながらやってみたいと思います。　質問の後半で何を言いたいのかと言うと、 Bに表示するページは、少なくともAに用意したメニュー項目分ありますよね。で、その複数あるページの中で、(例えば10枚ページがあったとして)、特定の1ページにしか、背景画像が変わるというjavascriptを適用させたくないのです。　つまり、残りの9枚のページがBに表示されている時は、Aでメニュー項目をonmouseoverしてもBのページの背景画像は変わらない、と言う風にしたいのです。言葉が足らなくてすみません。