ＨＴＭＬタグ講座

[Home] [-5] [<] [>] [+5]

画像を使ったリンク

画像をリンクとして使う場合の指定です。

【画像全面を１カ所へのリンクにする】

画像にリンクを埋め込むときには、通常のリンクと同じようにリンク先を記入して、画像のタグ <IMG ～> をリンクタグで挟みます。
画像の周りに<BODY LINK="#～">で指定した枠の色が表示されます。この枠を消す場合は、<IMG SRC="pic.jpg" BORDER=0>のように、「BORDER」の属性を使います。

【１枚の画像を数カ所へのリンクにする】

１枚の画像を使って、いくつかの場所にリンクをします。「クライアントサイドクリッカブルマップ」などと呼ばれる方法です。
ブラウザや見ている人の環境によっては、イメージマップが正しく表示できない場合があります。イメージマップ以外にも別に文字でのリンクを用意しておくと良いでしょう。
よく似た方法で、画像を分割して並べておき、それぞれにリンクをはる方法があります。このページの下の次項目をご覧下さい。

開始タグ	終了タグ	内容
<IMG>	（なし）	画像を表示します
属性	属性値	内容
USEMAP	="（マップ名）"	<MAP>タグ内で定義したマップ名を指定します。ここで指定したマップに対応してリンクします。同一ページ内のマップを使用する場合、「USEMAP="#～"」となります。
開始タグ	終了タグ	内容
<MAP>	</MAP>	指定したマップのリンクなどを設定をこのタグ内に記入します。
属性	属性値	内容
NAME	="（マップ名）"	<IMG>などのタグ内で使用される「USEMAP」属性で指定されるマップ名を定義します。
開始タグ	終了タグ	内容
<AREA>	（なし）	特定の領域を指定して、そこに対応するリンク先を指定します
属性	属性値	内容
ALT	="（文字）"	画像を表示しない場合に、代わりに表示する文字を指定します
SHAPE	="rect"	リンク領域として反応する形を長方形にします
	="circle"	リンク領域として反応する形を円形にします
	="poly"	リンク領域として反応する形を多角形にします
COORDS	="（座標値）"	リンク領域として反応する範囲を座標で指定します。長方形なら"左上のＸ座標,左上のＹ座標,右下のＸ座標,右下のＹ座標" 円形なら"中心のＸ座標,中心のＹ座標,半径" 多角形なら各頂点を順番に"頂点1のＸ座標,頂点1のＹ座標,頂点2のＸ座標,頂点2のＹ座標,……"
HREF	="（リンク先）"	リンク先を指定します
NOHREF	（なし）	この領域にはリンクがないことを示します
TARGET	="（ウインドウ名）" ="_blank" ="_self" ="_parent" ="_top"	リンク先のウインドウを指定します詳しくは特殊なリンクの項目をご覧下さい

構成としては、<MAP>～</MAP>の中に<AREA>でリンクの領域と行き先を指定しておいて、<IMG>タグにどの<MAP>で定義したものを使うかを指定するかを選ぶ、ということになります。
領域が重なっている場合は、先に定義された方が優先されます。
マップ名は半角の英数で付けましょう。
<AREA>はリンク先１つにつき１つ必要です。
座標値は左上を原点（Ｘ、Ｙ共に0）とし、右方向にＸが、下方向にＹが増えていきます。
座標値を求める場合は画像のソフトなどを使っても得られます。
このようなマップを作成する場合は、各種ソフトの機能を使うと便利です。
サンプルは以下のようになります（リンク先はありません）。
画像の文字の部分と地図の薄い部分がリンクしている領域です。

↓このようになります

網走・知床｜釧路周辺｜札幌周辺

【画像を並べてそれぞれにリンクをする】

テーブルと画像を使ったリンクの方法です。
クリッカブルマップのタグ指定が面倒な場合、リンクの領域が全て長方形でも良い場合はこの方法も使えます。
この方法はクリッカブルマップの代用手段ですが、一枚の画像を使うと余白が多い場合などは、容量をセーブすることもできます。
テーブルは枠や余白を０にして（BORDER=0 CELLSPACING=0 CELLPADDING=0）画像がぴったりくっつくようにすると１枚の画像に見えます。
サンプルは以下のようになります（リンク先はありません）。

<DIV ALIGN="center"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 BGCOLOR="#FFFFFF"><TR>
<TD>　</TD>
<TD ALIGN="right" VALIGN="bottom"><IMG SRC="p/3712.gif" ALT="リンク無し"></TD>
<TD><A HREF="kamui.html"><IMG SRC="p/3713.gif" ALT="カムイワッカ湯の滝へリンク" BORDER=0></a></TD>
<TD><IMG SRC="p/3714.gif" ALT="リンク無し"></TD>
<TD ALIGN="left" VALIGN="top"><IMG SRC="p/3715.gif" ALT="リンク無し"></TD>
</TR><TR>
<TD>　</TD>
<TD><A HREF="goko.html"><IMG SRC="p/3722.gif" ALT="知床五湖へリンク" BORDER=0></a></TD>
<TD><IMG SRC="p/3723.gif" ALT="リンク無し"></TD>
<TD ALIGN="left"><IMG SRC="p/3724.gif" ALT="リンク無し"></TD>
<TD>　</TD>
</TR><TR>
<TD ALIGN="right" VALIGN="bottom"><IMG SRC="p/3731.gif" ALT="リンク無し"></TD>
<TD><IMG SRC="p/3732.gif" ALT="リンク無し"></TD>
<TD><A HREF="touge.html"><IMG SRC="p/3733.gif" ALT="知床峠へリンク" BORDER=0></a></TD>
<TD ALIGN="left"><IMG SRC="p/3734.gif" ALT="リンク無し"></TD>
<TD>　</TD>
</TR><TR>
<TD ALIGN="right"><IMG SRC="p/3741.gif" ALT="リンク無し"></TD>
<TD><IMG SRC="p/3742.gif" ALT="リンク無し"></TD>
<TD><IMG SRC="p/3743.gif" ALT="リンク無し"></TD>
<TD><A HREF="makka.html"><IMG SRC="p/3744.gif" ALT="マッカウス洞窟へリンク" BORDER=0></a></TD>
<TD>　</TD>
</TR></TABLE>
<A HREF="kamui.html">カムイワッカ湯の滝</a>｜<A HREF="goko.html">知床五湖</a>｜
<A HREF="touge.html">知床峠</a>｜<A HREF="makka.html">マッカウス洞窟</a></DIV><BR>

↓このようになります