【HTML】mapタグ - イメージマップ

HTMLのmapタグについて解説します。

検証環境

HTML

macOS

14.1

mapタグ

mapタグは“イメージマップ”を意味するタグです。

通常、画像にリンクを付けるためにareaタグと合わせて使用します。

基本構文

<map name="イメージマップ名">
    <area shape="形" coords="座標" href="URL" alt="説明">
    <area shape="形" coords="座標" href="URL" alt="説明">
    <area shape="形" coords="座標" href="URL" alt="説明">
</map>
<img usemap="イメージマップ名" src="画像データパス">

map要素とimg要素（イメージ）をusemap属性で関連付けし、area要素でクリック領域とリンクを設定します。

areaタグ

areaタグは“map要素のクリック領域”を意味するタグです。

属性

主な属性は次の通りです。

属性名	必須	内容
name	●	イメージマップ名
shap	●	領域の形（circle,default,poly,rect）
coords	-	領域の座標（x,yの2つの値で1つの座標）
href	-	リンク先
alt	-	リンクの説明

サンプル

１つの画像に対して、mapタグ・areaタグを使用し、複数のリンクを設定します。

sample.html

___ih_hl_start
<map name="techtriangle">
    <area shape="poly" coords="141,3,73,120,209,120,209,120" target="_blank" href="/development/markup-language/html" alt="HTML">
    <area shape="poly" coords="211,126,144,242,275,239,275,239" target="_blank" href="/development/programming/javascript" alt="PHP" />
    <area shape="poly" coords="70,126,5,241,136,241,136,241" target="_blank" href="/development/programming/css" alt="Command" />
    <area shape="poly" coords="74,125,206,126,139,239,139,239" target="_blank" href="/development/os/command" alt="Network" />
</map>
___ih_hl_end

<img usemap="#techtriangle" src="/storage/app/media/document/development/markup-language/html/tag/map/map-tag-sample.png">

プレビュー