Question

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

例如，地图上有三个名字。每个名称都有不同的X和Y坐标，如果用户点击X:100, Y:300左右，他们就会被带到董事会，而如果他们点击了X:400, Y:100，他们就会出现问题。被带到另一个董事会。

我已经考虑过使用<canvas>和javascript，但我不确定如何。

Answer 1

您正在寻找map元素，

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

您需要查看area才能看到其属性以获得理想的结果

这是一个基本的DEMO

链接不会加载到SO片段

中

<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>

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

1 个答案: