Question

我想在图片中最大的圆圈区域设置超链接。

我尝试使用地图标记。

我尝试在区域标签上设置绝对位置坐标，当我在PC上的浏览器上单击时，它可以正常工作。

但我的Android浏览器的绝对位置是错误的。

因此，我尝试使用div标签来获取我的链接。

但是我没有找到我的绿色区域进行点击。

我的代码如下链接

<style type="text/css">
    #outer{
        background:orange;
    }
    #inner{
        width: 50%;
        height: 50%;
        top:10%;
        right:10%;
        margin: 0 auto;
        position: relative;
        background:green;
    }
</style>

<div id=outer>
  <div>
      <img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720" height="100%" width="100%"  />
  </div>
  <div id=inner> 
      <a href="https://www.google.com"></a> 
  </div>
</div>

您可以查看https://jsfiddle.net/hL09ses6/1/了解更多信息。

Answer 1

您可以将图片作为 hyperlink 用于其他页面：

将其包装在锚标记 <a> ＆amp;
将 href 属性设置为您希望浏览器导航到的页面的 url 。

<强>代码：

<a href="https://www.google.com">
    <img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720"height="100%" width="100%"  />
</a>

查看this fiddle了解更多信息。 在以下代码段中，您可以看到自己的代码正常运行：

#outer {
  background: orange;
}

#inner {
  width: 50%;
  height: 50%;
  top: 10.5%;
  right: 10%;
  margin: 0 auto;
  position: relative;
  background: green;
}

#bigcircle {
  /* The numbers may require slight adjustments */
  width: 21.6%;
  height: 36%;
  top: 1.6%;
  right: 22.8%;
  margin: 0 auto;
  position: absolute;
  border-radius: 100%;
}

<div id=outer>
  <div>
    <img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720" height="100%" width="100%" />
  </div>
  <a href="https://www.google.com">
    <div id="bigcircle"></div>
  </a>
  <div id=inner>
    <a href="https://www.google.com"></a>
  </div>
</div>

对于更高级的用途，我建议使用图像映射！了解更多here。

Answer 2

您的演示是here

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p>
An image that is a link:
<a href="https://www.google.com">
<img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720" height="100%" width="100%"  />
</a>
</p>

</body>
</html>

＆＃13;

Answer 3

您需要在锚标记之间添加img标记。

＆＃13;

<div>
  <a href="http://google.com">
    <img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720" height="100%" width="100%"  />
  </a>
</div>

＆＃13;

如何在我的图像上设置链接

3 个答案: