• ベストアンサー

プルダウンメニューから2つのインラインフレーム内を切り替える

タイトルの通りなのですが、教えてください。 同じウインドウ内に、プルダウンメニューと2つのインラインフレームがあります。 左のインラインフレームにはjpgのイメージ、右のインラインフレームにはテキストが入ります。 プルダウンメニューは、Ａ支店、Ｂ支店などの支店名が表示されます。 プルダウンメニューの支店名を選択して、ＧＯボタンをクリックしたら、インラインフレーム内に選択した支店のjpgイメージと、説明のテキストを表示されるには、どのように記述したらよいですか？

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

  • ベストアンサー
  • NTJ
  • ベストアンサー率44% (46/103)
回答No.3

talepanda さんの解答でほとんど問題ないと思われますが、支店数が膨大と思われるのでもう少しシステマチックに作成されると後が楽かと思われます。 それと、なにか特別な理由がない限り、IFRAMEは他のHTMLファイルを表示するエレメントですので、DIVを使用したほうが宜しいかと思われます。 こんな具合です。 <SCRIPT> var fName=0; var fImage=1; var fText=2; var fData=[ ['Ａ支店','a.jpg','Ａ支店：Ａ市Ａ町・・・'], ['Ｂ支店','b.jpg','Ｂ支店：Ｂ市Ｂ町・・・'], 　・ 　・ 　・ ['Ｚ支店','z.jpg','Ｚ支店：Ｚ市Ｚ町・・・']]; function genOption(){ var ret=''; for(var i in fData) ret+='<OPTION value="'+i+'">'+fData[i][fName]+'</OPTION>"; return ret; } function chData(id){ document.getElementById('div1').innerHTML=fData[id][fImage]; document.getElementById('div2').innerHTML=fData[id][fText]; } </SCRIPT> こんな具合です。さらに支店のリスト部分を外部スクリプトファイル化すると、メンテナンス性が向上します。 で・・・ <SELECT onchange="chData(this.value);"><SCRIPT>document.write(genOption());</SCRIPT> としておくと、わざわざ「ＧＯ」ボタンを押さなくても切替がされるので、ユーザーに扱い易い画面になると思われます。 表示部分は、 <TABLE style="width:100%;heigth:400px;"><TR> <TD style="width:50%;"><DIV id="div1"></DIV></TD> <TD style="width:50%;"><DIV id="div1"></DIV></TD> </TR></TABLE> こんな具合かと。

その他の回答 (2)

  • talepanda
  • ベストアンサー率58% (45/77)
回答No.2

<html> <head> <script type="text/javascript"> function gid(i){return document.getElementById(i);} function f(){ if(gid('orz1').value==1){ gid('orz2').contentWindow.document.body.innerHTML="<img src='1.jpg' alt='1 no gazou'/>"; gid('orz3').contentWindow.document.body.innerHTML="<p>1 no setsumei</p>"; }else if(gid('orz1').value==2){ gid('orz2').contentWindow.document.body.innerHTML="<img src='2.jpg' alt='2 no gazou'/>"; gid('orz3').contentWindow.document.body.innerHTML="<p>2 no setsumei</p>"; }} </script> </head> <body> <iframe id="orz2"></iframe> <iframe id="orz3"></iframe> <br/><select id="orz1"><option value="1">shiten1</option><option value="2">shiten2</option></select><button onclick="f();">GO</button> </html>

  • sun-ward
  • ベストアンサー率54% (86/159)
回答No.1

あんまり詳しくないのですが、 試行錯誤してたら出来ましたのでお試しください＾＾； まず、ヘッダか外部CSSには以下を入れます。 <script type="text/javascript"> <!-- function jump(){ n=document.all.branch.value; if (n == 1){ window.parent.a.location="http://www.yahoo.co.jp/"; window.parent.b.location="http://www.goo.ne.jp/"; return false; } if (n == 2){ window.parent.a.location="http://www.infoseek.co.jp/"; window.parent.b.location="http://www.google.ne.jp/"; return false; } if (n == 3){ window.parent.a.location="http://www.msn.co.jp/"; window.parent.b.location="http://www.excite.co.jp/"; return false; } } // --> </script> HTML本体には、以下のプルダウンメニューを入れます。 <form> <select name="branch"> <option selected>▼支店を選んでください</option> <option value="1">東京支店</option> <option value="2">神田支店</option> <option value="3">浅草橋支店</option> </select> <input type="button" value="GO" onClick="jump();"> </form> プルダウンメニューで取得した各値を、 jumpという関数の中でnに代入しています。 つまりvalueが1のとき（東京支店）はYahooとgooに飛び、 valueが2のとき（神田支店）はInfoseekとGoogleに飛ぶように指定しました。 selectタグのname=branchという名前で、関数に値を渡しています。 肝心のインラインフレームですが <IFRAME SRC="URLを記入" name="a" …></IFRAME> <IFRAME SRC="URLを記入" name="b" …</IFRAME> というようにa,bの名前が付いてます。 関数内では、window.parent.a.location 部分の「a」がフレーム名です。 IE6、FireFox1.0で動作しています。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 複数のプルダウンメニューをインラインフレームに表示。

    複数（10個以上）のプルダウンメニュー（各メニュー）をインラインフレームにリンク表示させたいのですが。「GO」ボタンがあっても無くても結構です。誰か教えてください。よろしくお願いいたします。

  • プルダウンメニューでインラインフレームを・・・

    インラインフレームの内容（ファイル）を、プルダウンメニューで選択して変更できるようにしたいのですが、どういう風にスクリプトを書けばいいのでしょうか？　「プルダウンメニューで画像を変える」スクリプトは見つけたのですが・・・・・・。

  • フレームを使ったプルダウンメニュー

    フレームで「ヘッダー・左メニュー・右メインページ」というように３分割にし、左メニューに置いたプルダウンから項目を選ぶと右メインに表示される、という構造にしたいと思っています。 <HEAD>～</HEAD>内↓ <script language="JavaScript"> function jump(form) { var myindex=form.destination.selectedIndex window.open(form.destination.options[myindex].value, target="main"); } //--> </SCRIPT> プルダウン部分↓ <FORM NAME="form"> <SELECT NAME="destination"> <OPTION VALUE="a.html" SELECTED>あ</OPTION> <OPTION VALUE="k.html">か</OPTION> <OPTION VALUE="s.html">さ</OPTION> <OPTION VALUE="t.html">た</OPTION> <OPTION VALUE="n.html">な</OPTION> </SELECT> <INPUT TYPE="image" SRC="go.gif" onClick="jump(this.form)" BORDER="0"> </FORM> という様に記述した所、例えばプルダウンで「た」を選択した場合、右フレームにちゃんとt.htmlが表示されるのですが、左フレームのプルダウンの項目が「あ」に戻ってしまいます。「た」を選択した状態のまま残したいのですが。 ちなみにボタンに画像を使わず、<INPUT TYPE="button" ・・・・>にするとなぜか「た」選択の状態でちゃんと残ります。でも、できれば画像を使いたいのです。 うまいやり方をご存じの方は、教えていただけますか。おねがいします。

  • 二つのプルダウンメニューで最終的に選んだ結果をインラインフレームへ

    一つの頁内で完結させたいのですが、 一つ目のプルダウンメニューで【A,B...】の中から【A】をセレクトすると、 二つ目のプルダウンメニューで【A1,A2.A3....】という項目を出し、 二つ目で最終的に選んだ内容を、 同頁内にあるインラインフレーム内に読み込ませたいです。 二つのプルダウンを作る所までは何となくわかるのですが、結果表示のさせ方が上手くいきません。 教えてください！！

    • ベストアンサー
    • HTML
  • プルダウンメニューのリンク

    毎度お世話になっております。 今回聞きたいことは、テーブル内でプルダウンメニュ ーを左のTDタグへ入れ、選択された商品の画像を右の TDタグ内へ表示できるかどうかです。 ＜例＞ ┌――──────────────────┐ │　　　　　　　　　　　　　　│　　　　　│ │ここにプルダウンメニュー　　│ここに画像│ │（商品名が入ります）　　　　│（選択され│ │　　　　　　　　　　　　　　│　た商品）│　　 └────────────────────┘ こんな感じですが、可能でしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • プルダウンメニューのリンク

    こんばんは！上記の件なのですが、プルダウンメニューのリストの中の例えばリンク1は、フレームの右に表示、リンク2は左に表示、リンク3は、フレームを無視して全画面に表示というようなリンクの設定をしたいのですが、お願い致します。プルダウンのボタンを１個で振り分けるのは、できないのでしょうか？宜しくお願いします。

  • プルダウンメニューからPDF表示

    プログラミング、初心者です。 JavaScriptを使って、二つのプルダウンメニューをコンボ（1つ目に選択したメニューの内容で、2つ目を変化）させて、GO!ボタンを押すと2つ目のメニューで指定したPDFを別ウィンドウで表示させるようにしたいです。具体的には、1つ目のメニューで、Aを指定すると2つ目でA-1,A-2,A-3,,,。1つ目のメニューで、Bを指定すると2つ目でB-1,B-2,B-3,,,。というふうにしたいです。その場合どのように記述すればいいのでしょうか？ また、2つ目のメニューの選択肢がかなり多くなった場合でも、きちんと表示されるでしょうか？ ご回答よろしくお願いしますm(__)M

  • プルダウンメニューからインラインフレームに飛ばすタグ

    ホームページビルダー９を使用しています。 サイトのトップページのメニューをプルダウンメニューにしています。 このメニューの一部をクリックしたら、同ページのインラインフレーム内にサブメニューを 表示するようにしたいのです。 スクリプトはこんな感じです。 <SCRIPT language=JavaScript> <!-- function mmLoadMenus() { if (window.mm_menu_1118095635_0) return; window.mm_menu_1118095635_0 = new Menu("root",132,28,"left","middle",8,0,1000,-5,7,true,true,true,0,true,true); mm_menu_1118095635_0.addMenuItem("1 ページ","location='○○○/○○○.htm'"); ↑↑↑↑ これは別ウィンドウを開いて表示するタグ。ちゃんと動作します。 うまくいかないのが、nameという名前のインラインフレーム内に表示させようとする以下のスクリプトです。 mm_menu_1118095635_0.addMenuItem("２ページ","location='sub_window/sub1.htm' target="main"); Java Scriptを使わないノーマルな、インラインフレームに飛ばすタグを使用しているのでうまくいかないのだと思います。 どなたかご教授いただければ幸いです。 よろしくお願いします。

  • プルダウンメニューの件で、至急お願いします！

    突然すいませんが、仕事で早めに作成しなくてはいけないため、初心者で申し訳ございませんが、どなたか教えて下さい！ FLASHでHPを作っております。 これは、フレームに分けておりまして。上半分が「main」の「タイトル.html」です。 左半分が、「menu」の「menu.html」。 実際menuの結果を表示させるためのフレーム名前が「sub」の「intro.html」と設定しております。 既に、「menu」のボタンをクリックすると、プルダウンメニューが表示させ、「intro.html」上にあります中身を「menu」ボタンのmenu2ボタンをクリックすると、subの右フレーム内に表示させようとしております。 ですが、どうしてもうまくいきません。 アクションの記述がすごく難しく感じ、参考書等を読んでもわかりません・・。 勉強不足で大変申し訳ありませんですが、どなたか教えて下さい！！ 足りないものがあれば、すぐに補足いたしますので、どうかどうか、宜しくお願い致します！！ 本当に、困っております。。

    • ベストアンサー
    • Flash
  • プルダウンメニューの表示位置について

    画面左端にあるプルダウンメニューを表示すると画面からはみ出してしまい、メニューが読めません。ちなみに、視力が低いため、ユーザー補助の機能を使って文字を大きく表示しています。この状態で、プルダウンメニューが読めるようにするにはどうしたらいいですか？（左方向にプルダウンメニューが出てくるので、右方向にでてくるようにしたいのですが）

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する