可见区域标签？

Question

如何使html 始终可见，而不仅仅是关注？

似乎 应该 像这样简单：

的HTML：

<img src="image.png" width="100" height="100" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="50,50,50" href="#" alt="circle" />
</map>

CSS：

area {border: 1px solid red}

无论我做什么，似乎我根本都无法影响某个区域的样式，它看起来确实不受CSS影响。有任何想法吗？另外，还有其他无法使用样式标记的示例吗？

Answer 1

jQuery插件MapHilight：

您可能会在这里发现jQuery插件MapHilight）。

HTML / CSS替代

我建议使用带有绝对链接的div。原因是，这将很好地降低性能，并将所有选项显示为链接列表。图片地图不会那么友好。此外，采用更清洁，更现代的做法，这种替代方法将产生相同的结果。

#myImage {
  position:relative; width:640px; height:100px; 
  background-image:url("bkg.jpg");
}
a.apples {
  display:block; position:absolute; 
  top:0; left:0; width:100px; height:100px;
  border:1px solid red;
}
a.taters {
  display:block; position:absolute;
  top:0; left:200px; width:25px; height:25px;
  border:1px dotted orange;
}
#myImage a span {
  display:none;
}

-

<div id="myImage">
  <ul>
    <li><a href="page1.html" class="apples"><span>Apples</span></a></li>
    <li><a href="page2.html" class="taters"><span>Taters</span></a></li>
  </ul>
</div>