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


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

 <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://home.interlink.or.jp/~eiichi/index.html"> しろくまHPへ</A>

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

 

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

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

  <A NAME="SAMPLE01">その1</A>
  ([SAMPLE01]の部分は、なんでもカマヘンで)

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

  <A HREF="#SAMPLE01">その1へ</A>
  ([#]を忘れへんように)

 みたいに書けばOK!

 

次に進む


ホームページ作成ルームへ戻る しろくま君のホームページへ