我应该在html5中使用map标签将链接放在图像上吗？

Question

所以一个巨大的经典是把图像链接。 老式的方法是做类似

的事情

<a href="wtv">
    <img src="wvt">
</a>

自<map>引入以来，我们可以这样做：

<map name="exemple-map-1">
  <area shape="rect" coords="0,0 100%,100%" href="https://developer.mozilla.org" target="_blank" />
</map>
<img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png">

但这是好习惯吗？

Answer 1

  

注意：在HTML5中，如果还指定了id标记的<map>属性，则必须具有与name属性。

我更愿意使用position而不是更好的兼容性。这只是我的看法。一个例子是：

.wrap {
  display: inline-block;
  position: relative;
}

.wrap img {
  display: block;
}

.wrap .click {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 27px;
  top: 105px;
  width: 210px;
  height: 45px;
  border-radius: 15px;
}

<div class="wrap">
  <a href="#" class="click"></a>
  <img src="https://i.stack.imgur.com/qD4Z1.png" alt="" />
</div>

注意：我添加了背景色调以在图片顶部显示<a>。