ベストアンサー

複数フレームへのリンク

2005/05/25 12:27

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

piyokon
お礼率22% (2/9)

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

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

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

ベストアンサー

noname#35109

2005/05/25 17:40 回答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を余分に作るより，もっとフレームの構成を考えた方が良いと思います。

質問者

お礼 2005/05/27 11:50

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

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

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

2005/05/25 13:01 回答No.1

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

質問者