A repository of over 1000 quality jQuery plugins

jQuery JQuery RwdImageMaps

JQuery RwdImageMaps is a jQuery Maps plugin.

Created by Stowball

Responsive Image Maps jQuery Plugin

Not what you're looking for? Click here to view more Maps jQuery plugins

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 might also like these other Maps jQuery Plugins

  • ImageMaps

    jquery plugin which can be partially linked to the image

  • geoInput

    Geolocation input type for html forms. jQuery plugin. Requires on Google Maps v3 API and, for reverse geocoding, an API […]

  • Maplace JS

    A Google Maps Javascript plugin for jQuery.

License:

The MIT License (MIT)