响应式图像地图插件不起作用



我在使用Matt Stows jQuery插件创建响应图像映射时遇到了一些问题。我听从了所有的建议,但图像地图仍然没有响应。我希望你能帮忙。以下是说明(整页:https://github.com/stowball/jQuery-rwdImageMaps):

  1. 如果可能,请将正确的无单位宽度和高度属性添加到图像贴图图像中。您可以在CSS中覆盖这些内容,使它们具有响应性
  2. 在您的页面中添加一个指向jQuery的链接,最好是在底部闭合</body>之前
  3. 在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>

在我的php底部,我放置了这个:

<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,因为我不确定服务器上的正确路径,但这应该不是问题所在。

所以,我没有管理好插件,我仍然想知道,因为显然我没有做错什么,但我使用了另一个插件,最终它正常工作。如果其他人也有同样的问题,David Bradshaw的图书馆会完全按照我的要求,并按照他们应该的方式调整图像地图的大小:https://github.com/davidjbradshaw/imagemap-resizer

我也遇到了同样的问题,原来我使用的是JQuery v1.8.3,当我将其更新到JQuery v1.9时,这似乎奏效了。

也许是JQuery版本控制问题?

最新更新