做一个边框图像中的区域的地图

下面是一个图片地图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像素与周围地区的将是巨大的。

来源

2012-05-08 Dror

最简单的将是编辑图像。没有办法自动添加边框。 –

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

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

来源

2012-05-08 13:27:39

-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，（多边形）的灵活性，你获得的<a> S中的所有样式的功能。

来源

2015-08-15 15:27:31

这提出了响应式设置的问题 – fseminario

@fseminario正确的，这是一个最小的例子。为了使它响应，你有一些javascript来监听调整大小的事件并适当地调整大小。我目前有像这样的解决方案按预期运行。 –

@fseminario它不会使用百分比单位。我用这种技术来创建英国的响应式地图，地图标记完美地缩放。 – Mike

做一个边框图像中的区域的地图

回答

相关问题