5

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

这是具有 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 像素的边框，那就太好了。

4

2 回答 2

9

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

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

于 2012-05-08T13:27:39.547 回答
-1

我认为可以做的最好的事情是

<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,（多边形）的一些灵活性，但您获得了 s 的所有样式功能<a>。

于 2015-08-15T15:27:31.980 回答