jQuery "Matt Stow' s 响应图像映射插件“不工作

Question

因此，在我为自己开发的新投资组合网站上，我使用了以下插件。 https://github.com/stowball/jQuery-rwdImageMaps尽管它在我的网站上似乎无法正常工作。我不明白为什么一切都按照应有的方式设置并且看起来正常工作。如果有人可以快速浏览并帮助我，我将不胜感激。

The URL for the image map that isn't working is here http://kmgp.us/skillcloud.php .

应该发生的事情很简单....当您单击词云中的词时，它会下降到 #element。 (效果很好)，但由于该网站是响应式的...当您调整页面大小时，图像映射会乱七八糟。

该插件应该会自动调整图像映射的大小，但事实并非如此，所以我假设我的代码中存在严重或愚蠢的错误。

我使用jQuery插件的具体代码在这里...

<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();

    $('area').on('click', function() {
        alert($(this).attr('alt') + ' clicked');
    });
});
</script>

还有一些导入的 CSS 代码，如果你进入 Firebug ，它似乎被应用了......

img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
}

再次提前致谢!

Answer 1

您在头部加载我的 rwdImageMaps 插件，并在加载 jQuery 之前调用该插件。如果您检查控制台，您会看到 2 个错误:jQuery 未定义和 $ 未定义。将脚本向下移动到页面底部，在 jQuery 之后，其余的。

这应该可以解决它:)