Question

假设我有这张地图：

<map name="diffmap1" id="diffmap1" class="myMap">
<area shape="poly" coords="152,347,253,292,264,307,167,358" class="diff diff1">
<area shape="poly" coords="93,244,164,215,171,233,97,264" class="diff diff2">
</map>

和javascript：

$('.diff').click(function(e){
//code here
});

当我点击一个'diff'时，如何在'diff'周围出现带边框的div？

它必须自动计算位置，如边距顶部，边距左边和基于坐标的尺寸。

有什么想法吗？

Answer 1

无法使用直接HTML / CSS在图像地图的区域周围放置边框。

然而，您可以使用SVG执行此操作。我会推荐这个插件：http://www.outsharked.com/imagemapster/特别是它的笔触设置。

这是一个简单的演示，可以满足您的需求：

<img src="path/to/img" width="400" height="333" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="poly" coords="104,121,53,151,53,210,103,239,154,210,154,152" href="#" />
  <area shape="poly" coords="156,212,105,242,105,301,155,330,206,301,206,243" href="#" />
  <area shape="poly" coords="260,212,209,242,209,301,259,330,310,301,310,243" href="#" />
  <area shape="poly" coords="313,122,262,152,262,211,312,240,363,211,363,153" href="#" />
  <area shape="poly" coords="260,32,209,62,209,121,259,150,310,121,310,63" href="#" />
</map>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<script>
$('img').mapster({
  fillOpacity: 0,
  stroke: true,
  strokeColor: "3320FF",
  strokeWidth: 4,
  singleSelect: true,
});

<强> fiddle

jQuery - 地图区域周围的div边框

1 个答案: