Question

Website in question (Purple tile at bottom right, green boxes are the targets.

我有以下html使用区域标签来选择第一个绿色框但是我无法将其作为链接点击。如果它有任何不同，我正在使用bootstrap。

<div class="col-md-4">
  <img src="octa.png" usemap="#pmc">
  <map name="pmc">
    <area shape="rect" coords="978,482,1038,512" alt="pmc" href="www.google.com">
  </map>
</div>

感谢任何帮助！

Answer 1

您可以使用相对和绝对css属性

<div style="position:relative;">
  <a href="#" class="links" id="item1"></a>
  <a href="#" class="links" id="item2"></a>
  <img src="src/of/img.png" />
</div>

css side

.links {
  display:block;
  position:absolute;
}

Answer 2

您可以在imagemap中包含多个区域。

<img src="octa.png" usemap="#map" />

<map name="map">
  <area shape="rect" coords="51,47,112,77"  href="..." title="PMC Post" />
  <area shape="rect" coords="188,47,249,77" href="..." title="Direct Download" />
</map>

如何只制作图像链接的一部分？

2 个答案: