How To Make Banner Image Maps Responsive

Many of our customers use image maps in their LibGuides v.1 banners. Image maps are not, by nature, responsive. Here's some code you can use to make them responsive.

 

  1. Create a new image map or modify an existing map. Make sure the name and ID of the map are changed to usemap.
  2. Add class="img-responsive" and usemap="#usemap" to the image code.
  3. Go here and save the JavaScript file.
  4. Upload this file to the client's Custom Head > Customization Files area.
  5. Add the resulting <script> code to the top of the custom HEAD.

  6. Add this code to the custom footer.

    <script type="text/javascript">
    $('img[usemap]').rwdImageMaps();
    </script>
  7. Test to make sure everything looks and works as expected.