Skip to content

pelowok/image-map-resizer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Image Map Resize

Bower version npm 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

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.

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/

A note on IE8 and below

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]-->

License

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

NPM

About

Responsive HTML Image Maps (Dependancy free)

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%