🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

rwdImageMaps is a jQuery plugin for creating Responsive Image Maps. It allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize.

Plugins Responsive

Documentation

jQuery RWD Image Maps

CDNJS

Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize


Usage:

  • If possible, add correct, unitless width and height attributes to your image map images. You can override these in CSS to make them responsive.
  • Add a link to jQuery in your page, preferably at the bottom just before the closing </body>
  • After jQuery, either in a <script> block or a separate file, call:
$('img[usemap]').rwdImageMaps();

You may also want to wrap it inside a $(document).ready() function, like so:

$(document).ready(function(e) {     $('img[usemap]').rwdImageMaps(); });

Demo:

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html


Copyright (c) 2016 Matt Stow
Licensed under the MIT license (see LICENSE for details)
Minified version created with Online YUI Compressor: http://www.refresh-sf.com/yui/


You May Also Like