Html 为图像映射中的区域设置边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10499446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a border to the areas in the image maps
提问by Dror
I am trying to add a border around an Image Map Areas.
我正在尝试在图像地图区域周围添加边框。
Here is an example of an Image map with 3 sectors.
这是具有 3 个扇区的图像映射示例。
<body>
<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>
</body>
If somehow i could place a border with 2 pixel with around the area's it would be great.
如果以某种方式我可以在该区域周围放置一个 2 像素的边框，那就太好了。
回答by Patrick Moore
There is no way to do this with straight HTML/CSS. You can with SVG though that is not supported by IE6/7.
直接使用 HTML/CSS 无法做到这一点。尽管 IE6/7 不支持 SVG，但您可以使用 SVG。
You may find this JavaScript plugin of use: http://www.outsharked.com/imagemapster/particularly its strokesettings.
您可能会发现这个 JavaScript 插件的使用：http: //www.outsharked.com/imagemapster/特别是它的stroke设置。
回答by Limited Atonement
I think the best that can be done is something like
我认为可以做的最好的是
<body>
<style> a { border: 2px solid rgba(255,0,0,.1); }
a:hover{ border:2px solid rgba(0,0,255,.3); }</style>
<div style="position:relative">
<img src="trees.gif" width="1727" height="1434" />
<a href="http://www.trees.com/furniture.html"
style="display:block; width:247px; height:66px; left: 48px; top: 275px;
position:absolute;"></a>
</div>
</body>
Although you lose some of the flexibility of <area>s, (polygons), you gain all the style capabilities of <a>s.
尽管您失去了<area>s (多边形) 的一些灵活性，但您获得了<a>s 的所有样式功能。
