jQuery“Matt Stow 的响应式图像地图插件”不起作用答案

【问题标题】：jQuery "Matt Stow's Responsive Image Map Plugin" Not WorkjQuery“Matt Stow 的响应式图像地图插件”不起作用
【发布时间】：2013-01-27 09:53:55
【问题描述】：

因此，在我为自己开发的新作品集网站上，我使用了以下插件。 https://github.com/stowball/jQuery-rwdImageMaps 虽然它在我的网站上似乎无法正常工作。我不明白为什么一切都设置成它应该是这样并且似乎正在工作。如果有人可以快速查看并帮助我，那将不胜感激。

无法使用的图像映射的 URL 在这里 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;
}

再次非常感谢您！

【问题讨论】：

标签： jquery html css responsive-design imagemap

【解决方案1】：

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

这应该可以解决它:)

【讨论】：

我也没有。没想到Matt Stow 会回答。 “我感觉自己是白金金发秀的狂热粉丝”。