イメージマップ img/map/areaタグ・要素 usemap/name(id)/shape/coords属性

<img src="">

<img src="お好きな画像ファイル名" usemap="#マップの名前">

<map name="マップの名前">〜</map>

<area shape="" coords="" href="リンク先のURL" alt="リンク先の説明">

『SHAPE=""』属性には以下の内いずれか１つを指定します。

・default(全体)

・rect(四角形)

・circle(円)

・poly(多角形)

『COORDS=""』属性は以下の通り、画像を中心に数値(ピクセル単位)を設定します。

※数値間は半角カンマで区切る

・default(全体)の場合

設定なし

・rect(四角形)

左上のX座標,Y座標と右下のX座標,Y座標

・circle(円)

中心のX座標,Y座標と半径

・poly(多角形)

全ての角の座標を『X座標,Y座標』と順次指定し、最後の座標は開始点と同じ座標を指定して図形を閉じる

<img src="四角形.jpg" usemap="#testmap">

  <map name="testmap">

      <area shape="rect" coords="45,10,145,200" href="リンク先URL1" alt="URL1へ">

      <area shape="circle" coords="80,5,10" href="リンク先URL2" alt="URL2へ">

      <area shape="poly" coords="150,20,100,10,180,5" href="リンク先URL3" alt="URL3へ">

  </map>

A）『四角形.jpg』画像を表示して画像内の一部をクリックして

  リンク先に飛ぶようにする

B）画像の中でクリックできるマップ(領域)を『四角形』と『円』、

  『三角形』と3箇所つくる

C）画像の中でクリックできるマップ(領域)に『testmap』という

  名前をつける

D）『四角形.jpg』画像からC）のマップ名を参照する

E）それぞれ『リンク先のURL１〜３』にジャンプすることとし

  『URL１へ』等、画像が表示できない場合に備えて説明を入れる