WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:プルダウンメニューからフレームページへのリンク(ラベル)方法。

0:[投稿] a_n [2003/12/12 16:31 ][環境:IE6.0 わかりません]

こんにちは。はじめて質問させていただきます。説明不足のところもあるかもしれませんが、ご指導いただければ嬉しいです。
フレームを使用していないページから、フレームページへのリンクがうまくいかなくて困っています。
以前、似た質問内容が過去ログの中にあったのですが、サンプルのURLが消えてしまっているのと、私の理解力不足のせいでうまくいきません。

ちょっと質問が分かりにくいかもしれませんが、、、ひとまずページを書き出してみました。

(リンク元)
『A.html』

(フレームページの構成)
『B_frame.html』−・フレーム名left『B_menu.html』→『B_home.html#(仮)a』へのリンク
                          『B_home.html#(仮)b』へのリンク
                          『B_home.html#(仮)c』へのリンク
                                 
         ・フレーム名right『B_home.html』−「a」、「b」、「c」のラベルが付いている

フレームを使用しない「A.html」というページから、プルダウンメニューを使ったリンク方法(JavaScript使用)で、B_frame.html(B_menu.html[フレーム名left]とB_home.html[フレーム

名right]からなる左右に分割されたページ)へのリンクをはり、さらにはB_home.htmlの中にはったラベルにまで指定して飛ぶことができるようにしたい、という欲張りなものです。

私なりにこちらの質問内容のログを参考にしながら(真似しながら)幾つかのパターンで作ってみましたが、一つ目のラベルにしか飛ぶことができません。
プルダウンメニューを使わず、まず普通にテキストにリンクを貼り試してみましたがこちらもだめだったので、多分、フレームページに書き込んだタグに間違いがあるような気がするの

ですが分からなくて困っています。何か肝心なものが抜けているのかもしれません。。。
現在書き込んでいるタグは以下の通りです。

リンク元ページリンク部分抜粋
--------A.htmlに書き込んだタグ------------

<SCRIPT LANGUAGE="JavaScript">
<!--
function MyLink(){
alink=document.flink.slink;
mlink=alink.options[alink.selectedIndex].value;
if(mlink!="-"){
location.href=mlink;
}
}
//-->
</SCRIPT>
<FORM method="post" name="flink">
<select name="slink">
<OPTION selected value="-">------商品小見出しMENUー------</OPTION>
<OPTION value="-">------------------------</OPTION>
<OPTION value="B_frame.html?B_home>a">・「a」を見る</OPTION>
<OPTION value="B_frame.html?B_home>b">・「b」を見る</OPTION>
<OPTION value="B_frame.html?B_home>c">・「c」を見る</OPTION>
<OPTION value="-">------------------------</OPTION>
</select>
<INPUT type="button" value="GO!" onClick="MyLink()">
</FORM>

--------B_frame.htmlに書き込んだタグ------------
<HTML>

<FRAMESET cols="200,*" frameborder="NO" border="0">
<FRAME src="B_menu.html" name="left">
<FRAME src="B_home.html"#a name="right">
<FRAME src="B_home.html#b" name="right">
<FRAME src="B_home.html#c" name="right">
</FRAMESET>

</HTML>

というかんじです。
私のかんじでは、b_frame.htmlの<FRAMESET>〜</FRAMESET>の中で、各ラベルの書き込み場所が違う気がするのですが、、、。動きを見ると最初のラベルだけしか生きてこない気がします

。長々とすみませんが、どなたか教えていただければ嬉しいです。よろしくお願いします。


1:[回答] いそね [2003/12/12 19:31 ]

大まかに以下の3点が問題かと思います。
 @OPTIONのvalueがちょっとアヤシイ。
 AB_frame.htmlで値を受け取っていない
 B"right"のframesetはひとつでよい。

まず@ 
もし使うならaの前は「>」ではなくて「#」ですね。
今回は次のB_frame.htmlでファイルを書いてありますから
遷移させたいnameだけ「?」の後ろに記述してください。

 value="B_frame.html?a"

次にA
せっかく値を渡すのですからB_frame.htmlで受け取ってあげましょう。(笑)
location.searchで値を取り出し、rightにフレームに対して
location.hashで遷移させてください。

↓functionにするとこんなカンジでしょうか?

function changeHash(){
 // A.htmlよりデータ取得
 var data = location.search;

 //データが有ったら
 if (data.length > 1){
  // 「?」の後ろのデータを取り出す
  aName = data.substring(1, data.length);
  // 指定された箇所に画面内遷移。
  self.right.location.hash =  aName;
 }
}
これをonLoadで呼んでください。

最後にB
rightのフレームの記述はひとつで大丈夫です。
<FRAME src="B_home.html" name="right">

この動作イメージで合ってますでしょうか?


2:[質問] a_n [2003/12/13 09:47 ]

早速のご回答、ありがとうございました!
最初はhttp://chaichan.hp.infoseek.co.jp/qa0001/qa312.htmを見て、「リンク数分framesetのHTMLファイルを用意して使い分ける」という方法を挑戦してみた結果の惨敗です。
いただいた回答を参考に、修正してみましたが、正直難しくてどこをどう直したら良いのか分からないのが現状です。ごめんなさい。 これは「framesetのHTMLファイル内でFRAME要素をJavaScriptで記述して分岐する」という方法なのでしょうか。
分かる(?)部分だけひとまず先日書いた物に修正してみました。
まず、「onLoadで呼ぶ」というのが分からないので、このままでは呼び出せないと思うのですが、どこになにを入れたら良いのか分からず。

 aNAME=data.substring(1,data.length);
  self.right.location.hash =aNAME;

また、2箇所のaNAMEですが、ここはラベル名を入れるということでしょうか。ものすごく初歩的な質問で申し訳ありません。もし同じような動作をしているホームページなどご存じでしたらお教え願えれば幸いです。参考にしたいと思います。


リンク元ページリンク部分抜粋
--------A.htmlに書き込んだタグ<修正後>------------

<SCRIPT LANGUAGE="JavaScript">
<!--
function MyLink(){
alink=document.flink.slink;
mlink=alink.options[alink.selectedIndex].value;
if(mlink!="-"){
location.href=mlink;
}
}
//-->
</SCRIPT>
<FORM method="post" name="flink">
<select name="slink">
<OPTION selected value="-">------商品小見出しMENUー------</OPTION>
<OPTION value="-">------------------------</OPTION>
<OPTION value="B_frame.html?a">・「a」を見る</OPTION>
<OPTION value="B_frame.html?b">・「b」を見る</OPTION>
<OPTION value="B_frame.html?c">・「c」を見る</OPTION>
<OPTION value="-">------------------------</OPTION>
</select>
<INPUT type="button" value="GO!" onClick="MyLink()">
</FORM>

--------B_frame.htmlに書き込んだタグ<修正後>------------

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>サンプル</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeHash(){
 var data=location.search;
 if(data.length>1){
  aNAME=data.substring(1,data.length);
  self.right.location.hash =aNAME;
}
}
//-->
</SCRIPT>
</HEAD>
<FRAMESET cols="200,*" frameborder="NO" border="0">
<FRAME src="B_menuhtml" name="left">
<FRAME src="B_home.html" name="right">
</FRAMESET>


</HTML>


------------------------------------------------


3:[回答] うみ [2003/12/14 00:36 ]

>「onLoadで呼ぶ」
B_frame.htmlのHEAD部に
<script language="JavaScript" for="window" event="onload">
   changeHash();
</script>


4:[完了] a_n [2003/12/15 09:40 ]

ご回答、ありがとうございました。
お返事頂いた方法で、イメージ通りの動作ができるようになりました。うみさん、いそねさん、本当にありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World