├── .nojekyll
├── powerpuff-girls.fw.jpg
├── LICENSE
├── README.md
├── angular-rwdImageMaps.js
└── index.html


/.nojekyll:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/powerpuff-girls.fw.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cowglow/AngularJS-rwdImageMaps/HEAD/powerpuff-girls.fw.jpg


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Izilla Partners Pty Ltd
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AngularJS RWD Image Maps
 2 | 
 3 | ### 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
 4 | 
 5 | ---
 6 | 
 7 | #### Usage:
 8 | 
 9 | * If possible, add [correct, unitless](https://dev.w3.org/html5/markup/img.html) `width` and `height` attributes to your image map images. You can override these in CSS to make them responsive.
10 | * Add a link to jQuery in your page, preferably at the bottom just before the closing `</body>`
11 | * Include AngularJS link and angular-rwdImageMaps.js
12 | 
13 | ---
14 | 
15 | ```html
16 | <img class="rwdimgmap" usemap="#YourMapName" />
17 | or
18 | <img rwdimgmap usemap="#YourMapName" />
19 | ```
20 | ```js
21 | angular.module('map', ['rwdImageMaps'])
22 |   .controller('MapCtrl', function($scope){
23 |     $scope.myTrigger = function(arg){
24 |       alert(arg);
25 |     }
26 |   });
27 | ```
28 | 
29 | #### Demo:
30 | Original jQuery Plugin
31 | https://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
32 | 
33 | AngularJS Directive
34 | https://cowglow.github.io/AngularJS-rwdImageMaps/
35 | 
36 | ---
37 | 
38 | Copyright (c) 2012 [Matt Stow](https://mattstow.com)  
39 | Licensed under the MIT license *(see [LICENSE](https://github.com/stowball/jQuery-rwdImageMaps/blob/master/LICENSE) for details)*  
40 | Minified version created with Online YUI Compressor: https://refresh-sf.com/
41 | 


--------------------------------------------------------------------------------
/angular-rwdImageMaps.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * rwdImageMaps AngularJS Directive v1.0
 3 |  *
 4 |  * 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
 5 |  *
 6 |  * Original Copyright (c) 2013 Matt Stow
 7 |  * https://github.com/stowball/jQuery-rwdImageMaps
 8 |  * http://mattstow.com
 9 |  * Licensed under the MIT license
10 |  *
11 |  * angular-rwdImageMaps.js (by Philip Saa)
12 |  * https://github.com/cowglow/
13 |  * @cowglow
14 |  */
15 | 
16 | angular.module("rwdImageMaps", []).directive("rwdimgmap", function ($window) {
17 |   return {
18 |     restrict: "CA",
19 |     link: function (scope, element, attrs) {
20 |       element.bind("load", function () {
21 |         var w = $(element).attr("width"),
22 |           h = $(element).attr("height");
23 | 
24 |         function resize() {
25 |           if (!w || !h) {
26 |             var temp = new Image();
27 |             temp.src = $(element).attr("src");
28 |             if (temp.src == undefined) temp.src = $(element).attr("ng-src");
29 | 
30 |             if (!w) w = temp.width;
31 |             if (!h) h = temp.height;
32 |           }
33 | 
34 |           var wPercent = $(element).width() / 100,
35 |             hPercent = $(element).height() / 100,
36 |             map = attrs.usemap.replace("#", ""),
37 |             c = "coords";
38 | 
39 |           angular
40 |             .element('map[name="' + map + '"]')
41 |             .find("area")
42 |             .each(function () {
43 |               var $this = $(this);
44 | 
45 |               if (!$this.data(c)) {
46 |                 $this.data(c, $this.attr(c));
47 |               }
48 | 
49 |               var coords = $this.data(c).split(","),
50 |                 coordsPercent = new Array(coords.length);
51 | 
52 |               for (var i = 0; i < coordsPercent.length; ++i) {
53 |                 if (i % 2 === 0) {
54 |                   coordsPercent[i] = parseInt((coords[i] / w) * 100 * wPercent);
55 |                 } else {
56 |                   coordsPercent[i] = parseInt((coords[i] / h) * 100 * hPercent);
57 |                 }
58 |               }
59 |               $this.attr(c, coordsPercent.toString());
60 |             });
61 |         }
62 |         angular.element($window).resize(resize).trigger("resize");
63 |       });
64 |     },
65 |   };
66 | });
67 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <title>Responsive Image Maps AngularJS Directive</title>
  6 |     <style>
  7 |       body {
  8 |         font-family: Helvetica, Arial, sans-serif;
  9 |       }
 10 |       h1 {
 11 |         font-size: 20px;
 12 |       }
 13 |       div {
 14 |         width: 100%;
 15 |       }
 16 |       img[usemap] {
 17 |         border: none;
 18 |         height: auto;
 19 |         max-width: 100%;
 20 |         width: auto;
 21 |       }
 22 |     </style>
 23 |   </head>
 24 |   <body ng-app="map">
 25 |     <div ng-controller="MapCtrl">
 26 |       <h1>Responsive Image Maps AngularJS Directive</h1>
 27 |       <p>
 28 |         Allows image maps to be used in a responsive design by recalculating the
 29 |         area coordinates to match the actual image size on load and
 30 |         window.resize.
 31 |       </p>
 32 |       <p>
 33 |         <a href="https://github.com/cowglow/AngularJS-rwdImageMaps/blob/AngularJS/angular-rwdImageMaps.js"
 34 |           >Download the AngularJS Directive from github</a
 35 |         >
 36 |         <strong>or</strong>
 37 |         <a href="https://github.com/stowball/jQuery-rwdImageMaps"
 38 |           >Download the original jQuery plugin from github</a
 39 |         >
 40 |       </p>
 41 |       <p>This image map was created in minutes with Adobe Fireworks.</p>
 42 | 
 43 |       <!-- Start Demo Image Map -->
 44 |       <img
 45 |         class="rwdimgmap"
 46 |         src="powerpuff-girls.fw.jpg"
 47 |         width="1024"
 48 |         height="768"
 49 |         usemap="#powerpuffgirls"
 50 |         alt=""
 51 |       />
 52 |       <map name="powerpuffgirls">
 53 |         <area
 54 |           shape="poly"
 55 |           coords="122,36,281,36,285,37,287,39,289,42,289,47,289,48,278,77,276,81,274,84,271,85,218,85,218,90,210,90,208,95,207,99,204,100,72,100,26,87,23,84,20,81,19,76,35,40,37,38,43,35,62,35,65,30,68,26,72,25,115,25,119,27,121,30,122,36,122,36"
 56 |           href=""
 57 |           ng-click="myTrigger('The Powerpuff Girls')"
 58 |           title="The Powerpuff Girls"
 59 |           alt="The Powerpuff Girls"
 60 |         />
 61 |         <area
 62 |           shape="poly"
 63 |           coords="864,668,912,650,922,668,971,667,973,718,981,722,985,729,988,731,1010,731,1010,742,833,742,833,730,865,730,865,721,874,721,874,718,864,668,864,668"
 64 |           href=""
 65 |           ng-click="myTrigger('Cartoon Network')"
 66 |           title="Cartoon Network"
 67 |           alt="Cartoon Network"
 68 |         />
 69 |         <area
 70 |           shape="poly"
 71 |           coords="1010,298,995,281,979,267,962,256,944,248,927,242,909,238,876,236,857,237,838,240,817,246,797,255,778,266,761,281,746,299,735,322,730,335,728,346,726,348,721,349,709,344,711,361,718,378,708,380,697,388,688,398,685,404,685,411,686,419,691,425,698,429,707,431,735,426,743,427,752,433,762,444,774,454,798,469,787,483,779,481,772,482,761,486,753,495,747,505,746,516,746,521,748,527,751,532,759,538,741,561,734,572,732,584,733,591,737,599,744,604,754,607,765,604,776,597,797,570,817,543,857,488,865,488,893,488,910,485,924,483,930,483,935,485,939,490,934,496,931,501,929,506,932,514,938,519,945,522,954,523,966,521,979,516,985,512,989,507,993,500,994,493,991,484,986,476,967,464,982,454,998,440,1013,425,1024,409,1024,329,1017,312,1010,298,1010,298"
 72 |           href=""
 73 |           ng-click="myTrigger('Buttercup')"
 74 |           title="Buttercup"
 75 |           alt="Buttercup"
 76 |         />
 77 |         <area
 78 |           shape="poly"
 79 |           coords="571,101,563,83,562,66,549,80,541,96,537,112,536,128,537,141,531,141,508,141,508,141,511,133,517,126,533,114,500,111,476,111,452,114,438,118,424,124,410,131,400,140,392,152,390,167,391,174,394,183,400,191,409,198,391,215,379,234,371,252,368,271,367,277,368,298,371,316,381,338,396,358,414,375,399,378,387,385,379,393,377,405,378,412,382,418,388,424,395,429,411,434,425,435,431,446,439,456,459,474,480,488,502,500,514,507,523,515,528,523,530,534,529,541,526,547,515,562,532,556,548,547,562,536,574,523,583,508,590,490,594,470,596,448,596,430,591,410,587,398,599,390,613,382,628,371,643,356,657,337,666,313,669,299,670,284,669,276,668,264,670,263,697,263,704,261,711,257,716,251,719,243,718,236,715,231,706,221,694,215,683,213,677,213,670,215,664,220,656,232,645,215,652,206,657,199,660,191,662,181,660,169,655,158,648,150,638,142,617,130,596,120,582,112,571,101,571,101"
 80 |           href=""
 81 |           ng-click="myTrigger('Blossom')"
 82 |           title="Blossom"
 83 |           alt="Blossom"
 84 |         />
 85 |         <area
 86 |           shape="poly"
 87 |           coords="254,286,232,271,207,260,179,254,150,252,119,254,103,257,88,263,71,270,61,275,58,274,57,273,45,269,36,268,17,271,7,276,1,283,0,283,0,285,0,290,0,352,2,354,1,355,1,390,3,401,5,410,9,420,22,441,39,460,58,476,47,480,38,487,32,494,30,504,33,515,41,524,53,531,69,534,77,533,85,530,90,525,93,518,91,512,88,508,85,505,85,502,86,499,89,497,97,496,120,500,138,503,154,503,167,503,185,531,215,576,235,609,241,617,248,622,255,626,265,628,273,626,280,621,285,614,287,605,283,592,276,580,261,558,269,553,273,547,276,541,277,536,274,524,267,513,257,504,250,501,244,501,240,502,237,503,225,488,242,478,259,468,276,451,282,447,292,446,318,450,327,448,334,445,339,439,341,431,337,419,329,409,318,401,307,398,301,398,301,393,301,391,303,391,321,393,336,391,352,387,370,380,387,370,373,368,364,364,358,360,353,354,350,347,347,330,345,313,343,302,340,293,336,286,331,280,318,272,305,267,293,266,282,267,272,270,262,276,254,286,254,286"
 88 |           href=""
 89 |           ng-click="myTrigger('Bubbles')"
 90 |           title="Bubbles"
 91 |           alt="Bubbles"
 92 |         />
 93 |       </map>
 94 | 
 95 |       <!-- End Demo Image Map -->
 96 |     </div>
 97 | 
 98 |     <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -->
 99 |     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
100 | 
101 |     <script src="angular-rwdImageMaps.js"></script>
102 | 
103 |     <script type="text/javascript" charset="utf-8">
104 |       angular
105 |         .module("map", ["rwdImageMaps"])
106 |         .controller("MapCtrl", function ($scope) {
107 |           $scope.myTrigger = function (arg) {
108 |             alert(arg + " clicked");
109 |           };
110 |         });
111 |     </script>
112 | 
113 |     <!-- Original jQuery Method -->
114 |     <!--
115 | 	<script src="../jquery.rwdImageMaps.min.js"></script>
116 | 	<script>
117 | 	$(document).ready(function(e) {
118 | 		$('img[usemap]').rwdImageMaps();
119 | 
120 | 		$('area').on('click', function() {
121 | 			alert($(this).attr('alt') + ' clicked');
122 | 		});
123 | 	});
124 | 	</script>
125 |     -->
126 |   </body>
127 | </html>
128 | 


--------------------------------------------------------------------------------