WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <map>「イメージマップ」

<map> 「イメージマップのリンクのまとまりを指定」[読み方:マップ]

<map>タグは、<area>タグと組み合わせてイメージマップを作成する際に使用します。
<img><object>タグにusemap属性でマップ名を指定することで利用可能となります。

HTML規格HTML4.01HTML5
使用可否
広告

<map> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツ
フレージングコンテンツ
フレージングコンテンツを子要素にもてる場所
トランスペアレント不可

<map> の属性

【構文】
<map name="マップ名">
</map>
属性意味値のサンプルなど
name="マップ名"マップ名【必須】
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<map>タグのサンプル

イメージマップのリンクのまとまりを指定(画像内の範囲指定リンク)
<img src="html_area_sample1.gif" usemap="#samp le" alt="サンプル" width="350" height="210" border="0">

<map name="sample">
<area href="http://www.cman.jp" shape="rect" alt="四角形" coords="20,30,160,70">
<area href="http://www.cman.jp" shape="circle" alt="円形" coords="210,105,40">
<area href="http://www.cman.jp" shape="poly" alt="多角形" coords="275,145,275,205,335,175">
</map>
サンプル 四角形 円形 多角形
ページTOP

留意事項

  • <map>タグだけでは意味を成しません。<map>タグ内で<area>を指定し、<img><object>で"usemap属性"を指定することで<map>タグが有効となります。
  • "name属性"には、スペース文字は使用できません。
  • 同じドキュメント内の別の"name属性"と重複したマップ名は指定できません。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン