<map> 一つの画像に対して複数のリンクを設定する

<map>タグの説明

<map>は、一つの画像に対して複数のリンク先を設定する、イメージマップを作る祭に使用します。本来、一つの要素に複数のリンクを設定することは出来ないように思われますが、画面上の座標を使って範囲を区切り、それぞれにリンク先を持たせる事で実現します。

イメージマップを作るには、<map>でマップの名称を決め、<area>でリンク先と適用範囲を設定し、<img>で使用する画像とそこに適用するマップの名称を指定します。

<map>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• この要素は可視化されません。<img>に与える仮想マップを定義するのみです。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<map>に指定できる主な属性

name

イメージマップを参照するための名前を与えます。この属性は必須です。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

イメージマップの設定

<img src="画像URL" usemap="#MAP名">

画像ファイルと参照するMAP名を指定します。

<map name="MAP名">

<img>のusemap属性で参照する名前を定義します。

<area href="リンク先" shape="形状" coords="領域" alt="概要">

マップのリンク先、形状、領域、概要を定義します。

• shape="rect"：四角形
• coords="左端からの位置,上からの位置,右端の位置,底辺までの位置"

• shape="poly"：多角形
• coords="頂点の座標を時計回りで左端からの位置,上からの位置で記述"

• shape="circle"：円形
• coords="左端からの中心点の位置,上からの中心点の位置,半径"

<map>の使い方とサンプル

このタグを使ったマークアップのサンプルです。

<div>
	<img src="../images/imagemap_menu.gif" usemap="#menumap" alt="サンプル" width="450" height="50" border="0">
	<map name="menumap">
		<area href="#area1" shape="rect" coords="20,3,70,47" alt="TOP">
		<area href="#area2" shape="rect" coords="90,3,165,47" alt="ABOUT">
		<area href="#area3" shape="rect" coords="193,3,257,47" alt="NEWS">
		<area href="#area4" shape="rect" coords="285,3,337,47" alt="MAP">
		<area href="#area5" shape="rect" coords="358,3,425,47" alt="MAIL">
	</map>
</div>