Question

使用Matt Stows jQuery插件创建响应式图像映射时遇到一些问题。我遵循了所有的建议，但图像映射仍然没有响应。我希望你能提供帮助。这些是说明（整页：https://github.com/stowball/jQuery-rwdImageMaps）：

如果可能，请为图像映射图像添加正确的无单位宽度和高度属性。您可以在CSS中覆盖它们以使其响应。
在您的页面中添加指向jQuery的链接，最好是在底部在结束</body>
在jQuery之后，无论是在块还是单独的文件中，都要调用：

$('img[usemap]').rwdImageMaps();

这是我的代码，我设置了一个固定的宽度和高度，在CSS中被覆盖。

<div class="banners">
    <img src="wcf/images/blueTemptation/logo2.jpg" style="width: 980px; height: 80px; display:block;" alt="banner-x" usemap="#banner-y" />
    <map name="banner-y"><area shape="rect" coords="560,1,765,79" href="http://www.filmfutter.com/" alt="Kgergrfr" title="Filmfutter Startseite">
</div>

<script src="https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script>
<script>
    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    });
</script>

如果您想知道，我将脚本源更改为URL，因为我不确定我的服务器上的正确路径，但这应该不是问题。

Answer 1

所以，我没有管理插件才能开始工作，我仍然怀疑，因为很明显我没有做错任何事，但我使用了另一个插件，最后它正常工作。如果其他人有同样的问题，David Bradshaw的图书馆会完全按照我的意愿行事，并按照他们的方式调整图像地图的大小：https://github.com/davidjbradshaw/imagemap-resizer

Answer 2

我遇到了同样的问题，事实证明我正在使用JQuery v1.8.3，当我将其更新为JQuery v1.9时，似乎可以解决这个问题。

也许这是一个JQuery版本问题？

响应式图像映射插件不起作用

2 个答案: