- ベストアンサー
複数フレームへのリンク
過去の質問も幾つか参考にしたのですが やっぱり分かりません。 frameAとframeBとに分かれたページで、 『frameA内のリンクをクリックすると frameB⇒画像を表示 frameA⇒画像の説明を表示』 という動作をさせるにはどうしたら良いのでしょうか。 またバックボタンで戻った際に frameA・B共に戻す方法も知りたいです。 この動作をさせる為にはJavaScriptが必要不可欠なのか、 それともHTMLだけでできることなのかさえ分かりません。 御回答の程よろしくお願いします。
- piyokon
- お礼率22% (2/9)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （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を余分に作るより，もっとフレームの構成を考えた方が良いと思います。
その他の回答 (1)
- kokorone
- ベストアンサー率38% (417/1093)
Ａ・Ｂのフレームに分けている親（Ｃ）のページが あると思いますが、Ａのリンクをクリックする 時、Ｃを更新して、新たにＣ’・Ａ’・Ｂ’を作れ ばいいでしょう。 ☆Ａのリンク <a href="javascript:parent.location.href= 'new_c.html'">次へ</a> 戻る場合も、同様に、Ｃ’からＣにすればいいで しょう。 ☆戻りの場合 <a href="javascript:parent.history.back()">戻る</a>
お礼
その方法も考えていたのですが、 画像が多いためhtmlファイルが膨大な量になってしまうので、 別の方法を探していました。 回答No.2のsassakunさんの仰るとおり、 フレームの使い方から考え直す必要もありそうなので 他の表示方法も検討してみます。 回答ありがとうございました。
お礼
非常に参考になりました。 画像の量が多いので、来訪者に画像の量を 把握してもらう為にもフレーム構成にしたかったのです。 アドバイスにある通り、フレームは メニュー(画像リンク)表示のみに使うことにします。 また画像と説明とを同ウィンドウ(フレーム)内に表示した際に どうしても発生してしまうスクロールを避けようと思い 別フレームで、と考えていたのですが、 htmlが複雑になってしまうことを考えると 説明は画像と同じ場所に表示させた方が良さそうですね。 サンプルはとても分かり易かったので、 今後ページ編集の際に使わせて頂きます。 ご丁寧な回答ありがとうございました。