Question

我希望在包含多个项目的图片上有链接（在我的情况下为3，如上图所示）。目前我使用position：absolute来映射每个项目的链接。这导致重叠问题。我不想使用图像映射。

<div class="col-md-12">
    <a href="google.com" style="position: absolute;width: 149px;height: 240px;margin-left: 26%;"></a>
    <a href="yahoo.com" style="margin-left: 35%;position: absolute;width: 167px;height: 240px;"></a>
    <a href="index.com" style="margin-left: 45%;position: absolute;width: 151px;height: 240px;"></a>
    <img src="imagelink" alt="" class="col-md-12">
</div>

Answer 1

这正是设计图像映射的原因，但假设您不想使用它，您所要做的就是调整width和margin-left属性，以便他们不重叠。请注意，您的margin-left属性是基于百分比的，因此它们将根据父级的大小进行扩展。因此，您可能希望使用固定值来匹配width。

您需要的确切值会因您的图片而异。

这是一个工作示例，每个链接都有一个边框来展示点击区域：

＆＃13;

a:first-of-type {
  border: 5px solid red;
  position: absolute;
  width: 85px;
  height: 140px;
  margin-left: 195px;
}

a:nth-of-type(2) {
  border: 5px solid blue;
  margin-left: calc(195px + 85px + 10px); /* Previous offset + width + borders */
  position: absolute;
  width: 100px;
  height: 240px;
}

a:last-of-type {
  border: 5px solid green;
  margin-left: calc(290px + 100px + 10px); /* Previous offset + width + borders */
  position: absolute;
  width: 92px;
  height: 240px;
}

img {
  margin: 0 auto;
  display: block;
}

＆＃13;

<div>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <img src="http://placehold.it/400">
</div>

＆＃13;

希望这有帮助！：）

Answer 2

您可以使用left和translate的组合。请参阅下面的代码。

＆＃13;

a{
background-color:red;
position: absolute;
width:150px;
height:150px;
}
a#fir{
left:0;
}
a#two{
left:50%;
transform:translateX(-50%);
}
a#thr{
right:0;
}

＆＃13;

<div class="col-md-12">
    <a id="fir" href="google.com"></a>
    <a id="two" href="yahoo.com"></a>
    <a id="thr" href="index.com"></a>
    <img src="http://www.rokkorfiles.com/photos/360PX.jpg" alt="" class="col-md-12" style="width:100%;display:block;">
</div>

＆＃13;

Answer 3

您需要使用image_map

Demo fiddle

点击右上角，该图片的中间会重定向您不同的链接。

HTML：

<img src="https://www.w3schools.com/html/pic_mountain.jpg" usemap="#yourmap" border="0">
<map name="yourmap">
<area shape="rect" coords="0,0,50,50" href="https://www.google.com/" target="_blank">
<area shape="rect" coords="150, 150, 100, 100" href="https://www.yahoo.com/" target="_blank">
</map>

指向同一图片上项目的多个链接

3 个答案: