我在使用 Matt Stows jQuery 插件创建响应式图像 map 时遇到了一些问题。我听从了所有建议,但图像 map 仍然没有响应。我希望你能帮忙。这些是说明(整页:https://github.com/stowball/jQuery-rwdImageMaps):
- 如果可能,请为图像映射图像添加正确的、无单位的宽度和高度属性。您可以在 CSS 中覆盖它们以使它们响应。
- 在您的页面中添加指向 jQuery 的链接,最好在底部
收盘前
</body>
在 jQuery 之后,在一个 block 或一个单独的文件中,调用:
$('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
关于javascript - 响应图像 map 插件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26223812/