Submit your widget

image-map-resizer - Make the HTML image map responsive, so the map scales with the image

Created 4 years ago   Views 3620   downloads 1111    Author davidjbradshaw
View DemoDownload
26
Share |

Image Map Resize

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.

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

imageMapResize([selector || map object]);

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.

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/

To use this library with old IE you will need to also load the included polyfil and ensure IE is running in "Standards mode". This can be done by adding the following to your HTML head section.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lte IE 8]>
    <script type="text/javascript" src="js/ie8.polyfil.min.js"></script>
<![endif]-->

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