HTMLで画像の任意領域にリンクを付加する方法

Ⅰ. はじめに

タイトルの通り「HTMLで画像の任意座標にリンクを付加する方法」です。

Ⅱ. サンプルプログラム

index.html

<map name="map001">
  <area
    shape="rect"
    coords="0,0,300,100"
    href="https://example.com/1"
    target="_blank"
    alt="リンク1"
  />
  <area
    shape="rect"
    coords="0,100,300,200"
    href="https://example.com/2"
    target="_blank"
    alt="リンク2"
  />
</map>
<img usemap="#map001" src="/001.png" />

001.png

実行結果

省略

参考

• https://developer.mozilla.org/ja/docs/Web/HTML/Element/area