Question

I am using a responsive slider and want to make clickable links over the images.

I found this plugin to make responsive image maps
https://github.com/stowball/jQuery-rwdImageMaps/blob/master/jquery.rwdImageMaps.js

the slide looks like this, I have the link over an image map

  <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>

I initaite the plugin in the footer

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

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

});

I am getting some strange behavior, the image map/link only shows up when I resize the browser or if I run the above javascript from the console. I have tried running the code as set timeout and setting the ‘resize’ function to trigger on document ready. nothing seems to work to get the image map to show up except running this from the console or resizing the browser.

demo the image map is over the red button on the second slide

Answer 1

These file paths are wrong, your imageMap JS won’t even load on the demo page:

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

Try to fix these first.

Cheers,
Rob