0

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

我发现这个插件可以制作响应式图像地图 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 时才会显示。我尝试以设置超时运行代码并将“调整大小”功能设置为在文档准备好时触发。除了从控制台运行它或调整浏览器的大小之外,似乎没有任何方法可以显示图像映射。

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

4

1 回答 1

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

尝试先解决这些问题。

干杯,罗伯

于 2012-11-12T16:45:32.750 回答