• ベストアンサー

複数フレームへのリンク

過去の質問も幾つか参考にしたのですが やっぱり分かりません。 frameAとframeBとに分かれたページで、 『frameA内のリンクをクリックすると 　frameB⇒画像を表示 　frameA⇒画像の説明を表示』 という動作をさせるにはどうしたら良いのでしょうか。 またバックボタンで戻った際に frameA・B共に戻す方法も知りたいです。 この動作をさせる為にはJavaScriptが必要不可欠なのか、 それともHTMLだけでできることなのかさえ分かりません。 御回答の程よろしくお願いします。

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

  • ベストアンサー
noname#35109
noname#35109
回答No.2

JavaScriptだけではなく，HTMLや各ページやリンクの構成を説明しないとわからないかもしれませんが， 説明には，あっちのページにはこう書いてこっちのページにはこう書いて… などと説明しないとならないので，ますますわからなくなるのではないかと思います。 そこで，サンプルを提示しようと思います。これで理解してください。 サンプルは全て，メモ帳など "テキストエディタ" に貼り付けて，任意の同じディレクトリ(フォルダ)に，指定したファイルネームで保存してみてください。 １.JavaScriptによる方法 ---『index.html』------------------------ <html> <head> <title>教えて！画像</title> </head> <frameset rows="*,20%"> <frame name="main" target="footnotes" src="GazouHyouji0.html"> <frame name="footnotes" src="GazouSetsumei0.html"> </frameset> </html> ----------------------------------------- ---『GazouHyouji0.html』----------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>画像の表示0</title> <base target="footnotes"> </head> <body> <img alt="教えて！goo" src="http://oshiete.goo.ne.jp/images/h1/h1_50b.gif" border="0" width="123" height="22"> </body> </html> ----------------------------------------- ---『GazouSetsumei0.html』--------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>画像の説明0</title> <script language="javascript"> function frameChange1() { window.parent.main.location.href = "GazouHyouji1.html"; this.location.href = "GazouSetsumei1.html"; } </script> </head> <body> <a href="#" onClick="JavaScript:frameChange1();return false">画像の説明1へ</a> </body> </html> ----------------------------------------- ---『GazouHyouji1.html』--------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>画像の表示1</title> <base target="footnotes"> </head> <body> <img alt="goo" src="http://oshiete.goo.ne.jp/images/goo.gif" border="0" width="71" height="37"> </body> </html> ----------------------------------------- ---『GazouSetsumei1.html』--------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>画像の説明1</title> </head> <body> <p>説明1:「ｇｏｏ」です。　　<a href="index.html" target="_parent">戻る</a></p> </body> </html> ----------------------------------------- 以上５つのHTMLファイルがサンプルです。 『index.html』が入口です。 色々な場合があるので，全部はとうてい書ききれません。自分のファイルではどこがどうなるのか，アレンジしてみたください。 >> またバックボタンで戻った際に >> frameA・B共に戻す方法も知りたいです。 上記の場合，ブラウザのバックボタンは２回クリックしないと，元のindex.htmlには戻りません。 でも，『GazouSetsumei1.html』の「戻る」をクリックすると，元の表示に戻ります。 単なる「href="index.html"」です。JavaScriptは不要です。 また，　<a href="index.html" target="_top">戻る</a>　でも良いです。 >> この動作をさせる為にはJavaScriptが必要不可欠なのか、 >> それともHTMLだけでできることなのかさえ分かりません。 JavaScriptは不可欠ではありません。HTMLからだけでもできます。 ２.HTMLによる方法 上のファイルのうちJavaScriptが書いてあるのは『GazouSetsumei0.html』の１つだけです。 このページを以下のように書き替えます。 ---『GazouSetsumei0.html』--------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>画像の説明0</title> </head> <body> <a href="Gazou1.html" target="_parent">画像の説明1へ</a> </body> </html> ----------------------------------------- このHTMLでいったん，『Gazou1.html』に親フレームを飛ばします。 そして新たに『Gazou1.html』を作ります。 ---『Gazou1.html』----------------------- <html> <head> <title>画像１</title> </head> <frameset rows="*,20%"> <frame name="main" target="footnotes" src="GazouHyouji1.html"> <frame name="footnotes" src="GazouSetsumei1.html"> </frameset> </html> ----------------------------------------- と，こんな感じで，あとは書き替えなくて良いです。 HTMLからのハイパーリンクは基本的に１つしかできないので，取りあえず１つにリンクして， そのファイルにフレームを表示させれば良いわけです。 HTMLからすると，HTMLファイルが１つ増えてしまいますが，確実さは増しますしブラウザのバックボタンも１回で済みます。 あと，気になったのは，フレームはいちいち「戻る」ボタンを用意したり，ブラウザのバックで戻らなくて良いように， メニューを常に表示させておく意味で使われることが多いです だから，こういうようなフレームの使い方はまずしません。 JavaScriptを使うとかや妙なHTMLを余分に作るより，もっとフレームの構成を考えた方が良いと思います。

piyokon
質問者

お礼

非常に参考になりました。 画像の量が多いので、来訪者に画像の量を 把握してもらう為にもフレーム構成にしたかったのです。 アドバイスにある通り、フレームは メニュー(画像リンク)表示のみに使うことにします。 また画像と説明とを同ウィンドウ(フレーム)内に表示した際に どうしても発生してしまうスクロールを避けようと思い 別フレームで、と考えていたのですが、 htmlが複雑になってしまうことを考えると 説明は画像と同じ場所に表示させた方が良さそうですね。 サンプルはとても分かり易かったので、 今後ページ編集の際に使わせて頂きます。 ご丁寧な回答ありがとうございました。

その他の回答 (1)

  • kokorone
  • ベストアンサー率38% (417/1093)
回答No.1

Ａ・Ｂのフレームに分けている親（Ｃ）のページが あると思いますが、Ａのリンクをクリックする 時、Ｃを更新して、新たにＣ’・Ａ’・Ｂ’を作れ ばいいでしょう。 ☆Ａのリンク <a href="javascript:parent.location.href= 'new_c.html'">次へ</a> 戻る場合も、同様に、Ｃ’からＣにすればいいで しょう。 ☆戻りの場合 <a href="javascript:parent.history.back()">戻る</a>

piyokon
質問者

お礼

その方法も考えていたのですが、 画像が多いためhtmlファイルが膨大な量になってしまうので、 別の方法を探していました。 回答No.2のsassakunさんの仰るとおり、 フレームの使い方から考え直す必要もありそうなので 他の表示方法も検討してみます。 回答ありがとうございました。

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

関連するQ&A

  • 複数フレームの一括リンク（インラインフレーム）

    頁内にインラインフレームを二つ配置し、一方はメニュー、一方は本文という形式にしようと思っています。インラインフレームのある頁の画像にリンクを貼って、それをクリックするとメニューフレームにメニュー頁を、メインフレームに本文頁を一度に表示するようにしたいのですが、ウェブ上で見つけたそれらしいスクリプトは上手く動きませんでした。自分の持っているＪＡＶＡＳｃｒｉｐｔの本を見ると、アイフレームを使っているからリンク先の指定が上手くいっていないように思えます。アイフレーム使用でこのようなリンクを指定するのは無理なのでしょうか…？？　過去の質問も捜してみましたが分かりませんでした。回答よろしくお願いいたします。

  • リンクでの背景イメージの変換の方法、、

    Dreamweaverを使っています。 HTMLあるいはJAVASCRIPTでのコードを使って、 リンク(もしくはボタン等)をクリックする事によって 同じページ内で、背景の画像を変換したいのですが、 可能でしょうか。。 やり方が解らずに困っています。宜しくお願いします。

    • ベストアンサー
    • HTML
  • フレームリンク内にリンク先のページが表示されてしまいます

    フレームリンクを使うと外部のページを表示できるのですが、 表示してから外部ページをクリックしても、 フレームリンク内にリンク先のページが表示されてしまいます。 （アドレスはフレームリンクページのURL） クリックした際に、実際のリンク先のページが表示することは可能でしょうか？ Javascriptを使用してもOKです。 よろしくお願いします。

  • フレームからのリンク呼び出し

    いろいろ過去の質問・回答を読ませて頂いたのですが、よく判らないので質問させて頂きます。 フレーム機能を使って画面を左右に分割しているとします。 左画面にメニューとしてリンクを張ったボタンをいくつか並べてあります。 右画面には、左画面のメニューからリンクされたページを表示するようにしています。 ブラウザにこのページを表示させた直後１回目は、どのメニューボタンを押しても、右画面にそのリンク先が表示されます。 ただし、さらにメニューボタンを押して、別のリンク先を表示させようとしても、『ページでエラーが発生しました』とブラウザの下の方に表示されるだけで、右画面に要求しているリンク先が表示されません。 （なお、リンク先はCGIでもHTMLファイルでも同じようにエラーと言われます。） どのようにすれば、左画面のメニューボタンを押して次々に右画面を変えることが出来るのでしょうか？教えてください。 参考になるか判りませんが、メニューボタンに使っているタグを以下に記述します。 <FORM> <Input TYPE="button" Value="What's NEW" Style="background-color:#808080;color:#ffffff;width:100;height:30;font-family:Times New Roman;font-size:x-small;" onclick="top.index3.document.location='new.html'"> </FORM> （このようなタグが数個並んでメニューとなっています） 宜しくお願いいたします。

  • 「戻る」リンクをページ内につくる方法

    ページ内に「戻る」リンクを設置したいのですが、 ＃ブラウザの「戻る」ボタンと同じ動作 Javascript(history.back)を使わずに実現する方法はありますか？

    • 締切済み
    • CGI
  • フレームでの「戻る」について

    １．「ページA」から「ページB」へ遷移します。 ２．「ページB」は「B1」と「B2」というフレームで構成されています。 ３．「B1」のリンクをクリックすると「B1」内で内容が切り替わります。 ４．ある特定のリンクの場合は「B2」に内容が表示されます。 上記のような遷移のあとで、「B1」のみ「戻る」の操作をしたいのですが、JavaScriptやブラウザの戻るボタンでは、「B2」や「B1」を遷移した順にしか戻る事ができません。 History.back()といった方法ではなく、遷移元へのリンクを直接書いたりといったことも考えたのですが、値を保持する必要も出てくるため、できれば単純な戻るの操作を行いたいです。 「B1」に記述したJavaScriptは以下の通りです。 「<A href="JavaScript:self.history.back();" target="_self"></A>」 「B1」のみ、つまり特定のフレーム内でのみ戻るの操作をするにはどのようにすればよろしいでしょうか。

  • フレームページへのリンク

    トップページ(フレームなし)から、フレームページへのリンクがうまく表示されません。 トップページのリンクボタンをクリックすると、左側フレームのメニューは表示されますが、右側の内容のページが「Not Found」で表示されません。 が、表示されたフレーム左側のメニューをクリックすると表示されます。 トップページから、左右両方表示させるのにはどうすればよいのでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • フレームのリンクに関して

    　左のフレームにボタンを作ってそのボタンをクリックすると 右のフレームにリンク先が表示されるようにしたいのですが どうしてもできません。タグ辞典で勉強しながらやっているのですが よくわかりません。もうボタンはできています。そのボタンをクリック すると左のフレームにリンクさきが表示されてしまいます。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • リンクしてる画像

    ボタンを画像で作り、 別のページにリンクさせるようにしたのですが、 その画像の枠が、丁度テーブルの大きさで 青くなってしまいます。 それを消すにはどうしたらいいのでしょうか？ リンクしてるからだと思うのですが、 非表示にするにはどうしたらいいのでしょうか？ 途方にくれています。 HTML嫌いになりそうです。。。(泣)

    • ベストアンサー
    • HTML
  • インラインフレームにリンクするには

    お世話になります。　少年野球のホームページを作っていますが、リンクボタンを５つ作り、同じページにインラインフレームを一つ作って、リンクボタンをクリックすると、インラインフレーム内に表示させたいのですが、その方法が分かりません。HTMLで作っています。どなたかご教示願えますでしょうか？よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する