jQuery 插件 imagemapster 没有做任何事情

Question

我对 javascript 和 jQuery 还比较陌生，所以请记住，这可能是一个我没有看到的明显解决方案。

我引用了 jQuery，它对于其他事情来说工作得很好。也许 imagemapster 引用有问题？我下载了here我这样引用它。我也将“imagemapster.min.js”放入其中，但是当两者都放入时它不起作用，当它们单独使用时它也不起作用。

<script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.js"></script>
<script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.min.js"></script>

我阅读了文档并几乎完全遵循了它(见下文)，但它实际上对突出显示没有任何作用。相反，它稍微扰乱了它们的定位，从而破坏了页面，这是没有意义的，因为 Mapster 应该与定位无关。可点击区域也被向上移动并错位。它甚至不会给出任何错误；代码只是通过了，除了我所说的之外什么也没有发生。是的，我试图突出显示的图像 map 功能齐全，#downstairs、#upstairs 和 #offices 确实是图像标签的 ID，就像它们应该的那样。

$(document).ready(function()
{
    $('#downstairs').mapster({
        fillOpacity: 0.5,
        mapKey: 'alt',
        isSelectable: false,
        render_highlight:
        {
            fillColor: '2aff00'
        }
    });

    $('#upstairs').mapster({
        fillOpacity: 0.5,
        mapKey: 'alt',
        isSelectable: false,
        render_highlight:
        {
            fillColor: '2aff00'
        }
    });

    $('#offices').mapster({
        fillOpacity: 0.5,
        mapKey: 'alt',
        isSelectable: false,
        render_highlight:
        {
        fillColor: '2aff00'
        }
    });
});

这是图像和 map 的 html。他们三个都使用这种格式。

<div style="position:static;left:0px;top:0px">
<img id="downstairs" alt="downstairs" class="map" usemap="#downmap" style="visibility:visible;z-index:3; left: 10px; top: 54px;"
    src="sourceHere" width="1000" />
<map name="downmap" id="downmap">
    <!-- There is a large list of areas here that follow this format-->
    <area title="Portable 1" onclick="somefunction" coords="198,81,223,117" />
</map>
</div>

Answer 1

检查您的 map 区域是否已定义 href。例如:href="#"