为图像映射中的区域设置边框答案

【问题标题】：Make a border to the areas in the image maps为图像映射中的区域设置边框
【发布时间】：2012-05-08 13:20:16
【问题描述】：

我正在尝试在图像地图区域周围添加边框。

这是一个包含 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>

如果我能以某种方式在该区域周围放置一个 2 像素的边框，那就太好了。

【问题讨论】：

最简单的方法是编辑图像。无法自动添加边框。

标签： html

【解决方案1】：

没有办法用直接的 HTML/CSS 做到这一点。尽管 IE6/7 不支持 SVG，但您可以使用 SVG。

您可能会发现这个 JavaScript 插件的使用：http://www.outsharked.com/imagemapster/ 特别是它的 stroke 设置。

【讨论】：

【解决方案2】：

我认为最好的方法是

<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>

虽然您失去了<area>s（多边形）的一些灵活性，但您获得了<a>s 的所有样式功能。

【讨论】：

这会给响应式设置带来问题
@fseminario 对，这是一个最小的例子。为了使其响应，您有一些 javascript 来监听调整事件大小并适当地缩放大小。我目前有这样的解决方案按预期运行。
@fseminario 如果您使用百分比单位，则不会。我使用这种技术创建了英国的响应式地图，地图标记可以完美缩放。