ホームページ作成 - 画像にリンクを複数作成する

ホームページ作成ＴＯＰ > リンク > 画像にリンクを複数作成する

画像にリンクを複数作成する

１枚の画像に、リンクを複数作成する方法です。
この方法を『イメージマップ』や『クリッカブルマップ』と呼びます。（以下『イメージマップ』）

おそらく一番見かけるイメージマップはＹＡＨＯＯＪａｐａｎの一番上のロゴとその左右の会員情報などの部分です。（04年5月現在）

sample

下記の１枚の画像内の各図形をクリック↓すると新しいウィンドウが開きます。

ＨＴＭＬ　<img>,<map name>,<area>

イメージマップを作成するには、一枚の画像に複数リンクを作成します。

全体構造は下記の様になります。


<img src="画像" usemap="#名前">             ←画像を設置
<map name="名前">                           ←下記<area>を囲います
 <area href="リンク先" shape="形" coords="座標" alt="">←ここでリンクの設定
 <area shape="default" nohref alt="">        ←画像全体のリンクを付けない
</map>

座標は、全体画像の左上の座標をゼロ『０，０』として、そこからの距離を『ｘ座標，ｙ座標』としてピクセルで表します。

形	書き方	必要な座標
丸　形	`shape="circle"`	円の中心，半径
四角形	`shape="rect"`	左上，右下
多角形	`shape="poly"`	全ての角（最初と最後の座標は同一にする）
全体	`shape="default" nohref`	画像全体にはリンクを付けない

＜＜サンプルの座標位置は下記の通りです。＞＞

ホームページ作成（イメージマップ）

★に関しては、最上部から時計回りに座標を取ってます。それぞれの座標は下記になります。

ホームページ作成（イメージマップ）

書き方は


<img src="画像" width="サイズ" height="サイズ" alt="" usemap="#linkmap">

<map name="linkmap">

<area href="リンク先" target="_blank" shape="circle" coords="34,38,25"
 title="円" alt="">

<area href="リンク先" target="_blank" shape="rect" coords="66,14,116,64"
 title="四角" alt="">

<area href="リンク先" target="_blank" shape="poly" coords="150,10,157,32,178
,33,161,44,167,64,151,53,133,64,138,45,123,32,143,32,150,10"
 title="多角形" alt="">

<area shape="default" nohref alt="">
</map>

こうなります