两张图片上的不同链接答案

【问题标题】：Different link on both images两张图片上的不同链接
【发布时间】：2017-02-07 16:53:29
【问题描述】：

美好的一天！如何在两张图片上放置不同的链接。 check 和 paw 是对不同页面的引用。如何解决这个问题呢？这是一张测试图片，svg 将无法工作。

提前感谢您的帮助。

示例 jsfiddle.net/Fateol/jpd5hrbo/3

【问题讨论】：

你在画布上使用这张图片吗？
将每张图片包装在不同的标签中。
一张图片与另一张重叠，另一张在重叠下方，虽然可以看到
在此问题中添加minimal reproducible example，即请不要链接。
example jsfiddle.net/Fateol/jpd5hrbo/3 建筑物可以通过鼠标移动，当建筑物相互碰撞时应该可以点击可见区域

标签： html css svg hyperlink

【解决方案1】：

您可以在map 标签的帮助下做到这一点。

来自w3schools

定义和用法该标签用于定义客户端图像映射。图像地图是具有可点击区域的图像。

元素的必需 name 属性与的 usemap 属性相关联，并在图像和地图之间建立关系。

该元素包含许多元素，这些元素定义了图像映射中的可点击区域。

示例代码

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

更多详情check this

【讨论】：

example jsfiddle.net/Fateol/jpd5hrbo/3 建筑物可以通过鼠标移动，当建筑物相互碰撞时应该可以点击可见区域
使用地图元素，您可以为单个图像提供两个不同的链接。将 href="your link" 与链接的区域元素放在一起
这是一张不同的图片，图片可以移动示例jsfiddle.net/Fateol/jpd5hrbo/3

【解决方案2】：

只需将图像切成 2 块，然后试试这个。 ' ' 这是第一部分。现在取另一半图像并执行相同的步骤。

【讨论】：

【解决方案3】：

页面上有html代码。确保将图像切成两半。并重复 2 个半场的过程。

【讨论】：