如何使 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 的影响。有任何想法吗？另外，还有其他不能样式化标签的例子吗？
【问题讨论】：
您可能会在这里找到感兴趣的 jQuery plugin MapHilight（死链接！！！）。
新链接：https://github.com/kemayo/maphilight
新演示：https://home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/
我建议使用 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>
【讨论】：
shape="circle"。
display:none;。而是使用position: absolute; visibility:hidden;。这将导致元素中断流，阻止它破坏布局，并且不被看到，除非屏幕阅读器忽略 display:none; 隐藏的内容
area 标签只定义了用户可以点击的空间，它没有可视化的表示，所以你不能真正使用 CSS 来设置它的样式。我喜欢你要去的地方，但不幸的是，你可能需要使用 javascript 在图像映射的顶部覆盖一个透明图像，以完成你想要做的事情。
【讨论】：
所以你的问题对我来说很重要。我希望能够使用区域标签做类似的事情，以获得除了正方形之外的漂亮小“形状”用于感兴趣的区域。所以我做了一些研究，结果如下：
http://www.netzgesta.de/mapper/
看起来它不会 100% 做你想做的事，但也许这是一个起点。
【讨论】：
要是这么简单就好了。
如果你想绘制简单的形状，你可以使用 HTML
它仍然需要大量的 Javascript，但它可能比处理叠加图像更容易/更有效，尤其是在形状大小不是静态的情况下。有一个很好的教程here。
【讨论】：
还有另一种选择。你可以写一个 SVG。然后你可以通过设置 fill:green; 来查看形状填充不透明度：1；
<svg height="300" width="200">
<a xlink:href="http://stackoverflow.com/">
<ellipse cx="100" cy="150" rx="100" ry="150" style="fill:white; stroke:none;fill-opacity: 0" />
</a>
</svg>
【讨论】：