我正在使用响应式滑块,并希望在图像上创建可点击的链接。
我发现这个插件可以制作响应式图像地图 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 时才会显示。我尝试以设置超时运行代码并将“调整大小”功能设置为在文档准备好时触发。除了从控制台运行它或调整浏览器的大小之外,似乎没有任何方法可以显示图像映射。
演示图像地图位于第二张幻灯片上的红色按钮上方