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

问题描述 投票:0回答:3

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

javascript jquery imagemap
3个回答
2
投票

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


0
投票

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

也许是 JQuery 版本控制问题?


0
投票

我将存储库克隆为我的子模块,然后它就可以工作了。我想这个模型并不是被设计成 CDN 的,我们可以用它作为 URl 加载到我们的 HTML 中。顺便说一句,我还是新来的,如果我的回答有问题,请告诉我。

© www.soinside.com 2019 - 2024. All rights reserved.