javascript - 使用 ImageMapster 居中

Question

我有一个使用 imagemapster 包裹在 div 中的图像，但由于某种原因该 div 不会居中。如果我删除所有 JS 代码，div 居中，那么这肯定是由于图像映射器的问题。

很简单，就是:

<div class="chartmap">
    <img id="waterfall" align="middle" src="http://i1372.photobucket.com/albums/ag358/rls462/waterfall_zpsdd7cc432.png" usemap="#water" alt="Waterfall Methodology Map">
    <map name="water">
        <area ......>

         ...
    </map>
</div>

这是演示:http://jsfiddle.net/stamblerre/t6K8X/13/

有什么想法吗？谢谢!!!!!!

Answer 1

当在 img 元素上初始化 Mapster 时，jQuery 使用默认左对齐的动态容器包装图像。
您可能希望将动态容器重新对齐到中心:

$('#waterfall') 是您的图像，因此要访问包装容器，您需要调用 $('#waterfall').parent()然后对齐它:.css({"margin":"0 auto"})

js:

$(document).ready(function () {
     $('#waterfall').mapster({
         singleSelect: true,
         clickNavigate: true,
         scaleMap: false,
         fill: false,
         stroke: true,
         strokeColor: '000080',
         strokeWidth: 3,
         mapKey: 'data-name',
     }).parent().css({"margin":"0 auto"});
 });

这是你的固定 Fiddle