图片特定区域的可点击链接

【问题标题】：Clickable link on specific area of an image图片特定区域的可点击链接
【发布时间】：2018-05-16 13:23:14
【问题描述】：

我有一张地图的图像它在地图上有特定的区域名称，但它只是一个 PNG 图像。我希望用户能够单击地图上的名称并被带到特定的板。

例如，地图上有三个名称。每个名字都有不同的 X 和 Y 坐标，如果用户点击 X:100, Y:300 左右，他们将被带到一个板块，而如果他们点击 X:400, Y:100，他们将被带到另一个板块。

我曾考虑过为此使用<canvas> 和javascript，但我不确定如何。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您正在寻找map 元素，

HTML <map> 元素与<area> 元素一起使用来定义图像地图（可点击的链接区域）。

您需要查看area 以查看其属性以获得所需的结果

这是一个基本的DEMO

链接不会在 SO sn-p 中加载

<img usemap="#image-clickable" src="http://placehold.it/350x150" alt="image">

<map name="image-clickable">
  <area shape="circle" coords="75,75,75" target="_blank" href="https://google.com">
  <area shape="circle" coords="275,75,75" target="_blank" href="https://google.com/ncr">
</map>

【讨论】：