地図上の特定の地点(エリア)をクリックして情報を表示したいことはないでしょうか？

先日、そんな相談を受けたので調べてみました(→https://web-developer-note.com/blog/html-css/html-imagemap/)。

「クリッカブルマップ」というものがあって、画像の特定のエリアにリンクを張るものです。四国の略図上の「東予」「松山」「大洲」「宇和島」のエリアに「西条市」「松山市」「大洲市」「宇和島市」の市のWEBサイトのリンクを設定してみました。

<img src="sikoku.png" usemap="#ImageMap" alt="" />
<map name="ImageMap">
  <area shape="circle" coords="208,170,24" href="https://www.city.saijo.ehime.jp/" alt="東予" />
  <area shape="circle" coords="104,202,22" href="https://www.city.matsuyama.ehime.jp/" alt="松山" />
  <area shape="circle" coords="75,243,19" href="https://www.city.ozu.ehime.jp/" alt="大洲" />
  <area shape="circle" coords="71,314,22" href="https://www.city.uwajima.ehime.jp/" alt="宇和島" />
</map>

次はそれをWEBサイトにアップしたものです。簡単ですね。

ご参考ください

クリッカブル マップ/hrkobo.com/