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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一张地图图片它在地图上有特定的区域名称，但它全部只是一个PNG图像。我希望用户能够在地图上点击某个名称并将其带到特定的董事会。图片特定区域的可点击链接

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

我想过使用<canvas>和javascript这个，但我不知道如何。

回答：

您正在寻找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>

以上是 图片特定区域的可点击链接 的全部内容， 来源链接： utcz.com/qa/257403.html

回到顶部