/AngularJS-rwdImageMaps

AngularJS Directive Responsive Image Maps

Primary LanguageHTMLMIT LicenseMIT

AngularJS RWD Image Maps

An AngularJS Directive that 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>
  • Include AngularJS link and angular-rwdImageMaps.js
<img class="rwdimgmap" usemap="#YourMapName" />
or
<img rwdimgmap usemap="#YourMapName" />
angular.module('map', ['rwdImageMaps'])
  .controller('MapCtrl', function($scope){
    $scope.myTrigger = function(arg){
      alert(arg);
    }
  });

Demo:

Original jQuery Plugin https://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

AngularJS Directive https://cowglow.github.io/AngularJS-rwdImageMaps/

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