>> リンク先のページです >>
このページは リンクをクリックしたらジャンプするページです。
それぞれ mamoho、だいすけ、なみ、にジャンプ先の対象となる
名前をつけてあります。
| <a name="mamoho"><img src="photo/mamoho.jpg" width="84" height="84"></a> |
今回は 写真にジャンプ先の名前をつけてみました。
テキストに名前をつける場合は <a name="名前">任意のテキスト</a> でしたが、
今回は 画像に名前をつけましたので 任意のテキストの部分が
<img src="○"> の 画像を貼り付けるタグに変わっています。
同様に ”だいすけ” も ”なみ” にも 名前を付けてみます。
<a name="mamoho"><img
src="photo/mamoho.jpg" width="84" height="84"></a>
<a name="daisuke"><img src="photo/daisuke.jpg" width="84" height="84"></a>
<a name="nami"><img src="photo/nami.jpg" width="84" height="84"></a> |
これで ジャンプさせたいところに名前が付きました。
あとは リンク元のメニューのページの設定です。
>> リンク元のメニューのページ >>
こちらは リンク元のメニューページです。
ちょっと それぞれのリンクをクリックしてみてください。
ちゃんと指定された場所にジャンプできていますね。
やり方としては ページ内での指定された場所にリンクする方法と同じですが、
今回の場合は 別のページにジャンプしていますので そのページのURLを指定
する必要があります。 指定方法は リンク先の ”#名前” の前に
リンク先のURLを指定しますので、
<a href="リンク先のURL#名前"> 〜 </a>
となります。
今回は ジャンプ先のページのファイル名が ”linkpage.html”ですので
<p><a href="linkpage.html#mamoho">○ mamoho</a></p>
<p><a href="linkpage.html#daisuke">○ 大輔君</a></p>
<p><a href="linkpage.html#nami">○ 奈美ちゃん</a></p> |
と 指定します。
これで 移動先のページに場所を指定してジャンプさせることができました。
では ポイントをまとめてみましょう。
● 複数の場所を指定するときは それぞれに違う名前を指定すること。
● 名前の指定は あとから確認してもわかりやすいものにすること。
● 必ず リンク元の名前とリンク先の名前を一致させること。
● リンク元の指定は ”リンク先のURL#名前”と指定すること。
