オプションメニューからアンカーへのリンク

質問

ビルダー１２を使用しています。
現在制作中で、あるページの左側に余白を置き、右側にインラインフレームを作成しました。
左側にオプションメニューを作成し、メニューの中を選択すると
インラインフレームの中の特定の場所（アンカー）にいけるように
設定したいのですが、なかなかうまくいきません。

ソースを知っている方、どうぞ教えてください！（><）/

回答No.1

mr_kjapan · ベストアンサー

インラインフレーム（IF)部分のソースコードは
<iframe src="xxx.html" width="480" height="380" frameborder="0" scrolling="auto" name="doremi">
</iframe>
の様な感じになっています。
＊＊iframe：インラインフレームタグ＊＊
：：属性：：
src　フレームの中に表示させる文書などのURLを指定
width　フレームの横幅をピクセルまたは％で指定
height　フレームの高さをピクセルまたは％で指定
frameborder　フレームの枠線を表示する1 、表示しない0
scrolling　スクロールバーの表示　yesは常に表示、noは常に非表示、　　auto：は、自動（既定値）
name　インラインフレームの名前
このほかにも属性は有ります。

色々検索してみようよ！！<br>
<a href="http://www.yahoo.co.jp/" target="doremi">YAHOOで検索</a><br>
<a href="http://www.google.co.jp/" target="doremi">GOOGLEで検索</a><br>
<a href="http://jp.youtube.com/" target="doremi">動画検索なら</a>
この場合だと、リンクをクリックすることで、IF内には、検索サイト
が表示されます。
target="?????"
?????部分を、IFの名前と同じにします。
IFの名前は任意で、nipponでもtokioでもかまいません。
ただ、targetはIFの名前と同一にします。

・・・・・・・・省・・・・・・・・・
<title>サマージャンボ宝くじの概要</title>
・・・・・・・・省・・・・・・・・・
・・・・・・・・省・・・・・・・・・
<h2><a name="jam18">１８　年　度</a></h2>
・・・・・・・・省・・・・・・・・・
・・・・・・・・省・・・・・・・・・
<h2><a name="jam19">１９　年　度</a></h2>
・・・・・・・・省・・・・・・・・・
・・・・・・・・省・・・・・・・・・
<h2><a name="jam20">２０　年　度</a></h2>
・・・・・・・・省・・・・・・・・・
＊＊例えばＩＦ内のＨＴＭＬファイルの名が　jambo.html　で、
ＩＦの名前が　takara さらにソースコードがこのようである
とします。
インラインフレームの中の特定の場所に移動させるには、
<a href="jambo.html#jam18" target="takara">１８　年　度</a><br>
<a href="jambo.html#jam19" target="takara">１９　年　度</a><br>
<a href="jambo.html#jam20" target="takara">２０　年　度</a>
の様な感じになります。
ただし、jambo.html　を別のフォルダに入れている場合は、
jambo.html#jam18　の前の部分に追加記述が要ります。
一連の作業は、ＨＰビルダーで出来ると思いますが

お礼

ありがとうございます♪
これを機にもっと勉強する気になりました！
ご丁寧にありがとうございます。助かりました。

補足

>mr_kjapanさん
とても丁寧な解説ありがとうございます♪
わかりやすくてとても勉強になりました。

ページの文字などからインラインフレームの中の特定の場所に移動させるやり方は↓の通りわかったのですが、
<a href="jambo.html#jam18" target="takara">１８　年　度</a><br>
オプションメニューからインラインフレームの中の特定の場所に移動するソースもおわかりになりますか？
ちなみにこのやり方もＨＰビルダーでできるのでしょうか？
今までできないと思っていて見過ごしていたのですが、ビルダーで処置できるならビルダーで作業したいのです。(>_<)
もしソースもしくはビルダーでの一連の作業をご教示いただけると助かります！

回答No.4

mr_kjapan

この例の場合、
<OPTION selected>サマージャンボ宝くじの概要メニュー</OPTION>
を
<OPTION value="jambo.html" selected>サマージャンボ宝くじの概要メニュー</OPTION>
としておかないと、オプションメニューからサマージャンボ宝くじの概要メニューを選択したときURLが表示されないのを忘れてしまってました。

回答No.3

mr_kjapan

＊＊追記です（一部違っていました）＊＊
解り辛くて申し訳ないです。
ビルダーの挿入→フォームと入力部品→オプションメニューで、属性窓が出ます。
まず、名前を任意で決めます。（SELECT name="menu"　の　name="????部分。
項目右のテキストエリアに、メニュー項目を追加していきます。
サマージャンボ宝くじの概要メニューと書き入れ「登録」ボタンを押すと、選択肢されます。
同様に、１８　年　度と書き入れ、さらに値にjambo.html#jam18と書き入れて登録ボタンを押すと、選択肢に追加されます。
同様に続けます。
属性窓を一旦「OK]して消します。
HTMLソースタブで、ソースコード閲覧すると

<FORM>
<SELECT name="menu">
<OPTION selected>サマージャンボ宝くじの概要メニュー</OPTION>
<OPTION value="jambo.html#jam18">１８　年　度</OPTION>
<OPTION value="jambo.html#jam19">１９　年　度</OPTION>
<OPTION value="jambo.html#jam20">２０　年　度</OPTION>
</SELECT>
</FORM>
のような、<FORM>タグで始まるソースがあります。
onchange="parent.takara.location.href=this[this.selectedIndex].value"
を追加します。
<SELECT name="menu" onchange="parent.takara.location.href=this[this.selectedIndex].value">
selected　の位置が、好みの位置から外れている場合が有るので
訂正する必要が生じることがございます。

見本（と言うほど対したものじゃない）を作り、アプロダにアップ
しました
http://www.kumatta.net/up/files/4890.zip

お礼

>mr_kjapan さん

こんなに丁寧に解説していただいて、手にとるようにわかりました♪
見本も作っていただいて本当に感謝しています！
色々と調べてはいたのですがこの方法ができなくて、ずっと悩んでいたのですが、無事解決することができました。週末ははればれとした気持ちで過ごせそうです☆
感謝の気持ちでいっぱいです。
大変勉強になりました！
ありがとうございます。

回答No.2

mr_kjapan

<FORM>
<SELECT name="menu" onchange="parent.takara.location.href=this[this.selectedIndex].value">
<OPTION selected>サマージャンボ宝くじの概要メニュー</OPTION>
<OPTION value="jambo.html#jam18">１８　年　度</OPTION>
<OPTION value="jambo.html#jam19">１９　年　度</OPTION>
<OPTION value="jambo.html#jam20">２０　年　度</OPTION>
</SELECT>
</FORM>

parent.takara.
parent.?????.
この?????の部分が、インラインフレームの name="?????"　と
同一になります。
ビルダーの挿入→フォームと入力部品→オプションメニュー
で、属性窓が出ます。
まず、名前を任意で決めます。（SELECT name="menu"　の　name="????　部分。
項目右のテキストエリアに、メニュー項目を追加していきます。
サマージャンボ宝くじの概要メニューと書き入れ「登録」ボタンを押すと、選択肢されます。
同様に、１８　年　度と書き入れ登録」ボタンを押すと、選択肢に追加されます。
同様に続けます。
ここで、選択肢から項目を選択して属性窓下記に有るイベントボタンを押すと、イベントでOnClickを選択し、さらにアクションでウインドウの指定したURLへジャンプしますを選択することで入力出来そうですが、なんだか煩わしく、多くのジャバスクリプトが記述されそうです。
そこで、属性窓を一旦「OK]して消します。
HTMLソースタブで、ソースコード閲覧すると
<FORM>
<SELECT name="menu">
<OPTION selected>サマージャンボ宝くじの概要メニュー</OPTION>
<OPTION>１８　年　度</OPTION>
<OPTION>１９　年　度</OPTION>
<OPTION>２０　年　度</OPTION>
</SELECT>
</FORM>
のような、<FORM>タグで始まるソースがあります。
OPTIONに続けてvalue="目的のURL"　と、手書きしたほうが良さそうです。
selectedは、あらかじめそのオプションを選択していることを意味します。