在点击图片的一部分时重定向到许多网址

Question

我使用PHP，并且尝试在单击图像的一部分时进行重定向。我将拥有一个图像，如果单击该图像的一部分，我会将用户重定向到新的URL。

类似此图片的东西：

如果单击这些图标之一，则必须重定向到包含产品的页面。我无法使用Google地图，客户希望将其作为图片...

也许与jquery一起使用？谁能指导我。

Answer 1

您可以使用良好的旧图像地图： https://www.w3schools.com/tags/tag_map.asp

并使用生成器来实现： https://www.image-map.net/

Answer 2

您需要将图钉图标与图像分开设置。之后，您需要在相应的图标上设置相应的链接。

Answer 3

只需使用CSS。将图像作为相对定位的父级的背景，然后使用绝对定位的子级

SASS

ul {
  background: transparent url(https://i.stack.imgur.com/HEzZR.png) center center;
  height: 300px;
  position: relative;
  li {
    position: absolute;
    list-style: none;
    &:nth-child(1){top:10px; left:50px;}
    &:nth-child(2){top:100px; left:33px;}
    &:nth-child(3){top:60px; left:290px;}
    a {
      display: inline-block;
      height: 30px;
      width: 20px;
      text-indent: -9999px;
      background-color:red;
    }
  }
}

查看此示例-https://jsfiddle.net/tgd7wn6k/