Responsive HTML Image Maps
JavaScript
Clone or download
Latest commit 7505b95 May 1, 2018
Permalink
Failed to load latest commit information.
js Release v1.0.7 May 1, 2018
.gitignore First commit Feb 17, 2014
README.md Update README.md Apr 29, 2018
bower.json Release v1.0.7 May 1, 2018
gruntfile.js Release v1.0.7 May 1, 2018
package-lock.json fix dep Apr 29, 2018
package.json Release v1.0.7 May 1, 2018

README.md

Image Map Resize

Bower version npm version CDNJS version license

This is a simple library that makes HTML Image Maps responsive, so that they automagically stay scaled to the size of the image they are attached to. It detects the window being resized and updates the co-ordinates of the image map accordingly.

This library can be used with or without jQuery.

Native JS Usage

Inclued the imageMapResizer.min.js script then add the following call to the bottom of your page:

imageMapResize();

Optionally you can pass a CSS selector that returns a collection of map tags, for example 'map.myMap'. Or a direct reference to a map object in the DOM. This function returns an array of map elements that it has been bound to.

jQuery Usage

Inclue jQuery and the imageMapResizer.min.js script and then add the following call to the bottom of your page:

$('map').imageMapResize();

Or you may want to wrap it in a $(document).ready() function:

$(document).ready(function() {
    $('map').imageMapResize();
});

Example

http://davidjbradshaw.com/imagemap-resizer/example/

WordPress

There is a port of this library to WordPress made by @iankevinmcdonald https://wordpress.org/plugins/add-image-maps/

IE8 Support

Version 1.0 of this project is optimised for IE9 and above. If you still require support for IE8 then please use V0.6.x. Both versions are functionally equivalent.

License

Copyright © 2014-15 David J. Bradshaw. Licensed under the MIT license.

NPM