我有一个使用 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/
有什么想法吗?谢谢!!!!!!
最佳答案
当在 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
关于javascript - 使用 ImageMapster 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24313657/