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

HTMLのmapタグをご紹介します。

mapタグ

mapタグはイメージマップをマークアップします。

基本構文

<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属性でmap要素を指定して関連づけます。

また、個々のクリック領域はareaタグでマークアップします。

areaタグ

areaタグはmap要素のクリック領域をマークアップします。

属性

主な属性をご紹介します。

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

サンプルコード

mapタグ,areaタグを使用して、1つの画像を領域分けし、複数のリンクを設定します。

ソースコード

<img usemap="#techtriangle" src="/storage/app/media/image/html-map-sample.png">
<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/php" alt="PHP" />
    <area shape="poly" coords="70,126,5,241,136,241,136,241" target="_blank" href="/development/os/command" alt="Command" />
    <area shape="poly" coords="74,125,206,126,139,239,139,239" target="_blank" href="/development/network" alt="Network" />
</map>

プレビュー