From 443dbb33c895964095d546ffc392adc0339ab532 Mon Sep 17 00:00:00 2001 From: "David J. Bradshaw" Date: Mon, 17 Feb 2014 15:42:46 +0100 Subject: [PATCH] Release v0.1.0 --- README.md | 2 +- gruntfile.js | 2 +- js/jquery.imageMapResizer.js | 29 ++++++++++++++++++++--------- js/jquery.imageMapResizer.map | 2 +- js/jquery.imageMapResizer.min.js | 4 ++-- 5 files changed, 25 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index db367c8..b0fc8f3 100644 --- a/README.md +++ b/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 diff --git a/gruntfile.js b/gruntfile.js index e162857..493ed41 100644 --- a/gruntfile.js +++ b/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', diff --git a/js/jquery.imageMapResizer.js b/js/jquery.imageMapResizer.js index 9e71f45..565620c 100644 --- a/js/jquery.imageMapResizer.js +++ b/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); \ No newline at end of file diff --git a/js/jquery.imageMapResizer.map b/js/jquery.imageMapResizer.map index a76ab99..8994ae9 100644 --- a/js/jquery.imageMapResizer.map +++ b/js/jquery.imageMapResizer.map @@ -1 +1 @@ -{"version":3,"file":"js/jquery.imageMapResizer.min.js","sources":["js/jquery.imageMapResizer.js"],"names":["$","setUpImageMaps","getCoords","i","len","coords","areas","split","getSourceImageWidthAndThenResizeMap","sourceImage","this","testImage","Image","onload","imageWidth","width","resizeMap","src","init","$mapImg","each","window","on","getCurrentImageWidth","j","clen","newCoords","sizeFactor","length","parseInt","join","console","debug","alt","map","attr","getElementsByTagName","fn","imageMapResize","jQuery"],"mappings":";;;;;;CAIA,SAAUA,GAEN,QAASC,KACL,QAASC,KACL,IAAK,GAAIC,GAAI,EAAOC,EAAJD,EAASA,IACrBE,EAAOF,GAAKG,EAAMH,GAAGE,OAAOE,MAAM,KAI1C,QAASC,KACL,GACIC,GAAcC,KACdC,EAAY,GAAIC,MAEpBD,GAAUE,OAAS,WACfC,EAAaH,EAAUI,MACnBN,EAAYM,QAAUD,GACtBE,KAIRL,EAAUM,IAAMR,EAAYQ,IAGhC,QAASC,KACLhB,IACAiB,EAAQC,KAAKZ,GACbR,EAAEqB,QAAQC,GAAG,SAAUN,GAG3B,QAASO,KACL,MAAOJ,GAAQJ,QAGnB,QAASC,KACL,GACIb,GAAGqB,EAAGC,EACNC,KACAC,EAAaJ,IAAyBT,CAE1C,KAAKX,EAAI,EAAOC,EAAJD,EAASA,IAAK,CAItB,IAHAsB,EAAOpB,EAAOF,GAAGyB,OACjBF,EAAUvB,MAELqB,EAAI,EAAOC,EAAJD,EAAUA,IAClBE,EAAUvB,GAAGqB,GAAKK,SAASxB,EAAOF,GAAGqB,GAAKG,EAAW,GAGzDrB,GAAMH,GAAGE,OAASqB,EAAUvB,GAAG2B,KAAK,KACpCC,QAAQC,MAAM,IAAI1B,EAAMH,GAAG8B,IAAI,KAAM3B,EAAMH,GAAGE,SAItD,GAMIS,GALAoB,EAAaxB,KACbS,EAAanB,EAAE,eAAeA,EAAEkC,GAAKC,KAAK,QAAQ,KAClD7B,EAAa4B,EAAIE,qBAAqB,QACtChC,EAAaE,EAAMsB,OACnBvB,IAGJa,KAGJlB,EAAEqC,GAAGC,eAAiB,WAClB,MAAO5B,MAAKU,KAAKnB,KAGtBoB,OAAOkB"} \ No newline at end of file +{"version":3,"file":"js/jquery.imageMapResizer.min.js","sources":["js/jquery.imageMapResizer.js"],"names":["$","fn","imageMapResize","this","each","setUpImageMap","window","jQuery"],"mappings":";;;;;;CAOA,SAAUA,GAwENA,EAAEC,GAAGC,eAAiB,WAClB,MAAOC,MAAKC,KAAKC,iBAGtBC,OAAOC"} \ No newline at end of file diff --git a/js/jquery.imageMapResizer.min.js b/js/jquery.imageMapResizer.min.js index 53b8898..47f8113 100644 --- a/js/jquery.imageMapResizer.min.js +++ b/js/jquery.imageMapResizer.min.js @@ -1,8 +1,8 @@ /*! Image Map Resizer (jquery.imageMapResizer.min.js ) - v0.1.0 - 2014-02-17 - * Desc: Resize HTML imageMap to scalled image. + * Desc: Resize HTML imageMap to scaled image. * Copyright: (c) 2014 David J. Bradshaw - dave@bradshaw.net * License: MIT */ -!function(a){function b(){function b(){for(var a=0;k>a;a++)l[a]=j[a].coords.split(",")}function c(){var a=this,b=new Image;b.onload=function(){g=b.width,a.width!==g&&f()},b.src=a.src}function d(){b(),i.each(c),a(window).on("resize",f)}function e(){return i.width()}function f(){var a,b,c,d=[],f=e()/g;for(a=0;k>a;a++){for(c=l[a].length,d[a]=[],b=0;c>b;b++)d[a][b]=parseInt(l[a][b]*f,10);j[a].coords=d[a].join(","),console.debug("["+j[a].alt+"] "+j[a].coords)}}var g,h=this,i=a("img[usemap=#"+a(h).attr("name")+"]"),j=h.getElementsByTagName("area"),k=j.length,l=[];d()}a.fn.imageMapResize=function(){return this.each(b)}}(window.jQuery); +!function(a){a.fn.imageMapResize=function(){return this.each(setUpImageMap)}}(window.jQuery); //# sourceMappingURL=js/jquery.imageMapResizer.map \ No newline at end of file