JavaScript: Responsive Image Maps

EPA's look and feel design is responsive, meaning it "responds" to the screen size of the device you're using to browse our web site. If you're using a mobile phone or tablet, the site will reflow to fit your display. As part of our attempt to give all users the best layout for their device, we also resize images.

Usually, resizing an image isn't an issue; the image grows or shrinks and is still legible. But when you're using image maps, the coordinates of the map are very important. Shrinking the image to fit the display results in broken image map coordinates. To counter that, we use the Responsive Image Maps jQuery plugin. This plugin recalculates the image map coordinates to match the actual image size on load and window.resize.

How-to: JavaScript

You target all image maps on your page with the selector img[usemap]. There are no changes needed for your HTML.

<script src="/sites/all/libraries/rwdimagemaps/jquery.rwdImageMaps.min.js"></script> <script> jQuery(document).ready(function(e) { jQuery('img[usemap]').rwdImageMaps(); }); </script>