diff --git a/bower.json b/bower.json index 84d4db5..eca8c16 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "image-map", - "version": "2.0.0", + "version": "2.0.1", "author": { "name": "Travis Clarke", "email": "travis.m.clarke@gmail.com", diff --git a/dist/image-map.es.js b/dist/image-map.es.js index 74c846d..59b6af8 100644 --- a/dist/image-map.es.js +++ b/dist/image-map.es.js @@ -27,7 +27,7 @@ function _createClass(Constructor, protoProps, staticProps) { return Constructor; } -var version = "2.0.0"; +var version = "2.0.1"; var RESIZE = "resize"; var LOAD = "load"; @@ -108,8 +108,6 @@ var ImageMap = /*#__PURE__*/function () { return function (e) { var w = e.target.width; var h = e.target.height; - var wPercent = offsetWidth / 100; - var hPercent = offsetHeight / 100; var mapName = e.target.getAttribute(USEMAP).replace(/^#/, ""); var areas = document.querySelectorAll(ImageMap.genAreaSelector(mapName)); @@ -118,7 +116,8 @@ var ImageMap = /*#__PURE__*/function () { var coordsString = area.dataset[COORDS] = area.dataset[COORDS] || area.getAttribute(COORDS); var coordsArrayOld = coordsString.split(","); var coordsArrayNew = coordsArrayOld.map(function (_, i) { - return i % 2 === 0 ? Number(coordsArrayOld[i] / w * 100 * wPercent) : Number(coordsArrayOld[i] / h * 100 * hPercent); + // Scale the coordinate from the original width/height to the actual rendered width/height (i.e. offset) + return i % 2 === 0 ? Number(coordsArrayOld[i] / w * offsetWidth) : Number(coordsArrayOld[i] / h * offsetHeight); }); area.setAttribute(COORDS, coordsArrayNew.toString()); }; diff --git a/dist/image-map.jquery.js b/dist/image-map.jquery.js index 96352a3..8848ce3 100644 --- a/dist/image-map.jquery.js +++ b/dist/image-map.jquery.js @@ -32,7 +32,7 @@ return Constructor; } - var version = "2.0.0"; + var version = "2.0.1"; var RESIZE = "resize"; var LOAD = "load"; @@ -113,8 +113,6 @@ return function (e) { var w = e.target.width; var h = e.target.height; - var wPercent = offsetWidth / 100; - var hPercent = offsetHeight / 100; var mapName = e.target.getAttribute(USEMAP).replace(/^#/, ""); var areas = document.querySelectorAll(ImageMap.genAreaSelector(mapName)); @@ -123,7 +121,8 @@ var coordsString = area.dataset[COORDS] = area.dataset[COORDS] || area.getAttribute(COORDS); var coordsArrayOld = coordsString.split(","); var coordsArrayNew = coordsArrayOld.map(function (_, i) { - return i % 2 === 0 ? Number(coordsArrayOld[i] / w * 100 * wPercent) : Number(coordsArrayOld[i] / h * 100 * hPercent); + // Scale the coordinate from the original width/height to the actual rendered width/height (i.e. offset) + return i % 2 === 0 ? Number(coordsArrayOld[i] / w * offsetWidth) : Number(coordsArrayOld[i] / h * offsetHeight); }); area.setAttribute(COORDS, coordsArrayNew.toString()); }; diff --git a/dist/image-map.js b/dist/image-map.js index 4309672..6edaa40 100644 --- a/dist/image-map.js +++ b/dist/image-map.js @@ -33,7 +33,7 @@ return Constructor; } - var version = "2.0.0"; + var version = "2.0.1"; var RESIZE = "resize"; var LOAD = "load"; @@ -114,8 +114,6 @@ return function (e) { var w = e.target.width; var h = e.target.height; - var wPercent = offsetWidth / 100; - var hPercent = offsetHeight / 100; var mapName = e.target.getAttribute(USEMAP).replace(/^#/, ""); var areas = document.querySelectorAll(ImageMap.genAreaSelector(mapName)); @@ -124,7 +122,8 @@ var coordsString = area.dataset[COORDS] = area.dataset[COORDS] || area.getAttribute(COORDS); var coordsArrayOld = coordsString.split(","); var coordsArrayNew = coordsArrayOld.map(function (_, i) { - return i % 2 === 0 ? Number(coordsArrayOld[i] / w * 100 * wPercent) : Number(coordsArrayOld[i] / h * 100 * hPercent); + // Scale the coordinate from the original width/height to the actual rendered width/height (i.e. offset) + return i % 2 === 0 ? Number(coordsArrayOld[i] / w * offsetWidth) : Number(coordsArrayOld[i] / h * offsetHeight); }); area.setAttribute(COORDS, coordsArrayNew.toString()); }; diff --git a/package.json b/package.json index 4a1f9c4..378f098 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "image-map", - "version": "2.0.0", + "version": "2.0.1", "description": "Response, dynamic image maps", "main": "dist/image-map.js", "module": "dist/image-map.es.js", diff --git a/src/image-map.js b/src/image-map.js index ddd9bf2..d41cf58 100644 --- a/src/image-map.js +++ b/src/image-map.js @@ -65,8 +65,6 @@ class ImageMap { return e => { const w = e.target.width; const h = e.target.height; - const wPercent = offsetWidth / 100; - const hPercent = offsetHeight / 100; const mapName = e.target.getAttribute(USEMAP).replace(/^#/, ""); const areas = document.querySelectorAll(ImageMap.genAreaSelector(mapName)); @@ -75,9 +73,10 @@ class ImageMap { const coordsString = (area.dataset[COORDS] = area.dataset[COORDS] || area.getAttribute(COORDS)); const coordsArrayOld = coordsString.split(","); - const coordsArrayNew = coordsArrayOld.map((_, i) => - i % 2 === 0 ? Number((coordsArrayOld[i] / w) * 100 * wPercent) : Number((coordsArrayOld[i] / h) * 100 * hPercent) - ); + const coordsArrayNew = coordsArrayOld.map((_, i) => { + // Scale the coordinate from the original width/height to the actual rendered width/height (i.e. offset) + return i % 2 === 0 ? Number((coordsArrayOld[i] / w) * offsetWidth) : Number((coordsArrayOld[i] / h) * offsetHeight); + }); area.setAttribute(COORDS, coordsArrayNew.toString()); } };