Release v0.1.0

README.md

@@ -1,6 +1,6 @@
 # Image Map Resize
 
-*This is a simple jQuery plugin to keep a HTML Image Map scaled to the size of an image. It detects the window being resized and updates the co-ordinates of the image map.*
+*This is a simple jQuery plugin to keep HTML Image Maps scaled to the size of an image. It detects the window being resized and updates the co-ordinates of the image map.*
 
 ### Usage
 

gruntfile.js

@@ -15,7 +15,7 @@ module.exports = function(grunt) {
     meta: {
       banner: '/*! Image Map Resizer (jquery.imageMapResizer.min.js ) - v<%= pkg.version %> - ' +
         '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
-        ' *  Desc: Resize HTML imageMap to scalled image.\n' +
+        ' *  Desc: Resize HTML imageMap to scaled image.\n' +
         ' *  Copyright: (c) <%= grunt.template.today("yyyy") %> David J. Bradshaw - dave@bradshaw.net\n' +
         ' *  License: MIT\n */\n',
 

js/jquery.imageMapResizer.js

@@ -1,7 +1,10 @@
-/*
- *  Scale html images maps to match scaled images.
+/*! Image Map Resizer
+ *  Desc: Resize HTML imageMap to scaled image.
+ *  Copyright: (c) 2014 David J. Bradshaw - dave@bradshaw.net
+ *  License: MIT
  */
 
+
 (function($){
 
     function setUpImageMaps(){
@@ -17,8 +20,9 @@
                 testImage = new Image();
 
             testImage.onload = function(){
-                imageWidth = testImage.width;
-                if (sourceImage.width !== imageWidth){
+                imageWidth  = testImage.width;
+                imageHeight = testImage.height;
+                if ((sourceImage.width !== imageWidth) || (sourceImage.height !== imageHeight)){
                     resizeMap();
                 }
             };
@@ -36,18 +40,24 @@
             return $mapImg.width();
         }
 
+        function getCurrentImageHeight(){
+            return $mapImg.height();
+        }
+
         function resizeMap() {
             var
                 i, j, clen,
                 newCoords = [],
-                sizeFactor = getCurrentImageWidth() / imageWidth;
+                sizeFactorWidth  = getCurrentImageWidth() / imageWidth;
+                sizeFactorHeight = getCurrentImageHeight() / imageHeight;
 
             for (i = 0; i < len; i++) {
                 clen = coords[i].length;
                 newCoords[i] = [];
 
-                for (j = 0; j < clen; j++) {
-                    newCoords[i][j] = parseInt(coords[i][j] * sizeFactor,10);
+                for (j = 0; j < clen; j+=2) {
+                    newCoords[i][j]   = parseInt(coords[i][j]   * sizeFactorWidth,  10);
+                    newCoords[i][j+1] = parseInt(coords[i][j+1] * sizeFactorHeight, 10);
                 }
 
                 areas[i].coords = newCoords[i].join(',');
@@ -61,13 +71,14 @@
             areas      = map.getElementsByTagName('area'),
             len        = areas.length,
             coords     = [],
-            imageWidth;
+            imageWidth,
+            imageHeight;
 
         init();
     }
 
     $.fn.imageMapResize = function(){
-        return this.each(setUpImageMaps);
+        return this.each(setUpImageMap);
     };
 
 })(window.jQuery);