Question

我正在使用响应式滑块，并希望在图像上创建可点击链接。

我发现这个插件可以制作响应式图像映射 https://github.com/stowball/jQuery-rwdImageMaps/blob/master/jquery.rwdImageMaps.js

幻灯片看起来像这样，我在图像地图上有链接

  <li>
<img src="slide_2.png" usemap="#Image-Maps_5201211121032528"   />
<map id="_Image-Maps_5201211121032528" name="Image-Maps_5201211121032528">
<area shape="rect" coords="282,120,369,153" href="http://canvas.landsend.com/canvas/arrivals/blogger/index3.html"/>
</map> 
    </li>

我在页脚中初始化插件

  $(document).ready(function(e) {

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

});

我收到了一些奇怪的行为，当我调整浏览器大小或者从控制台运行上面的javascript时，图像映射/链接才显示出来。我已经尝试将代码设置为设置超时并设置'resize'功能以在文档就绪时触发。除了从控制台运行此图或调整浏览器大小外，似乎没有任何工作可以显示图像映射。

demo图像地图位于第二张幻灯片上的红色按钮

上

Answer 1

这些文件路径错误，您的imageMap JS甚至不会在演示页面上加载：

http://www.widget.devserver2012.com/jenamobile/css/shCore.css http://www.widget.devserver2012.com/jenamobile/css/shThemeDefault.css http://www.widget.devserver2012.com/jenamobile/js/imageMap.js

首先尝试解决这些问题。

干杯，罗布

代码仅在从控制台运行时才起作用

1 个答案: