クリックで飛べるようにする


クリックで他のファイル(画像ファイル等も可)へ飛べる機能のことを、ホットリンクって言います。で、その方法は、

 <A HREF="sample.html">スイッチとなる文や画像</A>

って書くだけでOKですよ。(↑この場合、見ている人がスイッチとなる文や画像をクリックすると sample.html ページに飛びます。)

このタグが付けられたテキストは、文字が青色で表示されるとともにアンダーラインが付けられます。
このテキストをクリックするとその標識名をもつ部分にリンクして、その部分がただちに表示されます。

  ・文をスイッチにする記入例
     <A HREF="sample.html">ホームページへ</A>

  ・画像をスイッチにする記入例
     <A HREF="sample.html"><IMG SRC="image/abcd.gif"></A>

注意するのは、リンク先に指定するファイル(この例では sample.html )がどこにあるかですね。
HTMLファイルと同じディレクトリにある場合は、ファイル名のみでいいですけど、HTMLファイルを置いてるディレクトリの下のディレクトリにある場合では、

 親ディレクトリ
   │
   ├─「myhp」ディレクトリ
   │   │
   │   ├─sample.html
   │   │
   │   └─aaaa.html
   │
   │
   ├─HTMLファイル(*****.html)
   │
   └─abcd.html
  (↑こんな場合)

 <A HREF="myhp/sample.html">ここをクリック</A>

みたいに書かないと駄目ですからね。

また、この場合とは逆に、リンク先に指定するファイル(この例では sample.html )が、HTMLファイルを置いてるディレクトリの上のディレクトリにある場合は、

 親ディレクトリ
   │
   ├─「hogehoge」ディレクトリ
   │   │
   │   ├─HTMLファイル(*****.html)
   │   │
   │   └─aaaa.html
   │
   │
   ├─sample.html
   │
   └─abcd.html
  (↑こんな場合)

 <A HREF="../sample.html">ここをクリック</A>

みたいに書きます。つまり、リンク先ファイルが上の階層にあるときには「../」を画像ファイル名の前に付けるんです。

もうちょっと複雑になって、同層のファイル(この例では sample.html )をリンク先に指定する場合は、

 親ディレクトリ
   │
   ├─「myhp」ディレクトリ
   │   │
   │   ├─sample.html
   │   │
   │   └─aaaa.html
   │
   ├─「hogehoge」ディレクトリ       
   │   │  
   │   ├──hp_1.html
   │   │
   │   └──HTMLファイル(*****.html)
   │
   ├─abcd.html
   │
   └─efgh.html
  (↑こんな場合)

 <A HREF="../myhp/sample.html">ここをクリック</A>

 っていうふうに書きます。簡単に説明すると「../」で1階層上の親ディレクトリを指定して「myhp/」でその下の階層の myhpディレクトリを指定して、最後の「sample.html」でリンク先ファイルそのものを指定するんです。

 

 他のサイトや画像ファイルに飛ばす

 他人のホームページや画像ファイルをリンク先に指定したい場合は、

  <A HREF="http://****/index.html"> エスシーシーHPへ</A>

 みたいに、URL(必ず http:// から書く)を書けばOKです。

 

 同じページ内の特定の場所に飛ばす

 同じページ内の特定の場所に飛ばしたい場合は、まず飛ばしたい場所に

  <A NAME="sample01">その1へ</A>
  ([sample01]の部分は、なんでもいいです。)

 みたいなジャンプ先の印になるタグを書いて、あとはスイッチ側のタグを

  <A HREF="#sample01">その1</A>
  ([#]を忘れないように)

 みたいにHTML内の呼び出したい所に書けばOKです!

 その他にも飛ばしたい側に<A HREF="myhome.html#sample01">その1</A>
 と書いて別のHTMLファイル内の特定の場所を呼び出すことも出来ます。

 

次に進む


ホームページ作成の部屋へ戻る > 趣味の部屋へ