Question

我创建了一个墓地的图像地图，每个墓碑都有热点，我想在其上显示HTML丰富的Bootstrap 3弹出窗口，但是当我的弹出窗口出现时它们出现在图像的顶部而不是和热点一起。

这是我的地图：

<img width="1200" height="930" alt="" src="http://www.nathonjoneswebdesign.co.uk/portpatrickoldkirkyard/hotspotmap/CHURCHYARDHOTSPOTMAP.jpg" usemap="#HeadstoneMap">
<map name="HeadstoneMap">
<area title="Map Reference 1" href="#" shape="poly" coords="795,299,810,299,811,322,794,322" alt="Map Reference 1" data-toggle="popover1" data-content="">
<area title="Map Reference 2" href="#" shape="poly" coords="816,247,815,270,833,269,832,246" alt="Map Reference 2" data-toggle="popover2" data-content="">
</map>

这是我的JavaScript：

$(document).ready(function(){
$('[data-toggle="popover1"]').popover({
html: true,
trigger: 'hover',
placement: 'top',
content: function(){return '<img src="http://www.nathonjoneswebdesign.co.uk/portpatrickoldkirkyard/portpatrick-headstones/M1a.jpg" class="img-responsive" alt=""/>';}
});

$('[data-toggle="popover2"]').popover({
html: true,
trigger: 'hover',
placement: 'top',
content: function(){return '<img src="http://www.nathonjoneswebdesign.co.uk/portpatrickoldkirkyard/portpatrick-headstones/M2a.jpg" class="img-responsive" alt=""/>';}
});
});

这是问题的Bootply： http://www.bootply.com/YvO9vRu68J

您还可以在以下位置查看测试网站上的问题： http://www.nathonjoneswebdesign.co.uk/portpatrickoldkirkyard/churchyard-map.php

出于测试目的，我只制作了活体墓碑1和2，它们位于右侧距离标记的正下方。

您还会注意到我正在为每个弹出窗口重复我的JavaScript，但是如果可能的话，我希望将其插入重复区域并填充记录集（PHP / MySQL）中的数据以便映射响应用户对数据库记录所做的任何更改。这可能是另一篇文章！

感谢您提供的任何帮助，谢谢。

NJ

编辑：这是否超出了Bootstrap 3 popovers / jquery / javascript可能做的事情？我应该研究一下图像地图的替代方案吗？

如何定位Bootstrap 3 popover以显示在图像映射的热点区域旁边？

0 个答案: