{"_id":"responsive-image-map","_rev":"5-0fb0aadacb45c9ea845e64ae93e596f8","name":"responsive-image-map","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.0":{"name":"responsive-image-map","version":"1.0.0","keywords":["responsive","image","map","javascript"],"author":{"name":"geongu.park"},"license":"ISC","_id":"responsive-image-map@1.0.0","maintainers":[{"name":"geongu.park","email":"ggus.park@gmail.com"}],"homepage":"https://github.com/geongupark/responsive-image-map#readme","bugs":{"url":"https://github.com/geongupark/responsive-image-map/issues"},"dist":{"shasum":"03a15e24dbc0bd6a39958a969d5737b289f91c4d","tarball":"https://registry.npmjs.org/responsive-image-map/-/responsive-image-map-1.0.0.tgz","fileCount":7,"integrity":"sha512-tUTUxM2Lfwcm1AaopbErQZChDitTZk86EJF/G2ytDPxhmXwWgwpTykRZ/qOs/Za8Cl69a2tHU+WqQm6sJBGJ1A==","signatures":[{"sig":"MEUCIHVcbN9ySp59JJjdTdtDtsdZvPtRgGKHFCsoFEKjc9KgAiEAh/TfGvaWUQ7e9J1iMcTqUsq5mhArFf0U4VInMhP625o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7116},"main":"index.js","gitHead":"7d7fb7865b5191e65a4306eb61df19ec4cfe7c43","scripts":{"test":"jest --verbose","build":"babel src --out-dir dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"geongu.park","email":"ggus.park@gmail.com"},"repository":{"url":"git+https://github.com/geongupark/responsive-image-map.git","type":"git"},"_npmVersion":"10.8.1","description":"Responsive map according to image size","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","@babel/cli":"^7.24.8","@babel/core":"^7.25.2","@babel/preset-env":"^7.25.3","jest-environment-jsdom":"^29.7.0"},"_npmOperationalInternal":{"tmp":"tmp/responsive-image-map_1.0.0_1722529128777_0.7372058104219723","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"responsive-image-map","version":"1.0.1","keywords":["responsive","image","map","javascript"],"author":{"name":"geongu.park"},"license":"MIT","_id":"responsive-image-map@1.0.1","maintainers":[{"name":"geongu.park","email":"ggus.park@gmail.com"}],"homepage":"https://github.com/geongupark/responsive-image-map#readme","bugs":{"url":"https://github.com/geongupark/responsive-image-map/issues"},"dist":{"shasum":"ad1cae4766c481069639c4955b6c323524b45502","tarball":"https://registry.npmjs.org/responsive-image-map/-/responsive-image-map-1.0.1.tgz","fileCount":9,"integrity":"sha512-9wlE04/aQaDFWbcr2xUPc7R9YQ6WMir1tCnRx742DajKmzel4jRekZeOPVEkPOcDG8/8RHq+J1vXSzf3g7yV8w==","signatures":[{"sig":"MEYCIQDT/i2tA0t4ps6ZdoHElZN5lABa4Ff+K1Wp/sPVbsqd+gIhAJDCz9CLNXoXyKMgNEKcUhFtD9KpEkeZrtmxFNqq4xeX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9040},"main":"dist/index.js","gitHead":"4383c5f9d0370b65004dd9a800f667cdfe2c63bb","scripts":{"test":"jest --verbose","build":"webpack","prepublishOnly":"npm run build"},"_npmUser":{"name":"geongu.park","email":"ggus.park@gmail.com"},"repository":{"url":"git+https://github.com/geongupark/responsive-image-map.git","type":"git"},"_npmVersion":"10.8.1","description":"Responsive map according to image size","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","webpack":"^5.93.0","@babel/cli":"^7.24.8","@babel/core":"^7.25.2","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","@babel/preset-env":"^7.25.3","jest-environment-jsdom":"^29.7.0"},"_npmOperationalInternal":{"tmp":"tmp/responsive-image-map_1.0.1_1722530436666_0.010065534340924165","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"responsive-image-map","version":"1.0.2","keywords":["responsive","image","map","javascript"],"author":{"name":"geongu.park"},"license":"MIT","_id":"responsive-image-map@1.0.2","maintainers":[{"name":"geongu.park","email":"ggus.park@gmail.com"}],"homepage":"https://github.com/geongupark/responsive-image-map#readme","bugs":{"url":"https://github.com/geongupark/responsive-image-map/issues"},"dist":{"shasum":"e104b3a1699244dae4f8099de75dcd01004f587e","tarball":"https://registry.npmjs.org/responsive-image-map/-/responsive-image-map-1.0.2.tgz","fileCount":9,"integrity":"sha512-6BVHcCJlWONM2ohXK/r2oHJ2YYeOMfLAXnmEB8yqhs5nRc8XLk4yhEvETyYui9evK6r/Cvwx590txWEQSKzI9w==","signatures":[{"sig":"MEYCIQCjo9ZUkJPBK9Im5bouQjg39F3OBr3rZ/5HXkvix4wYMgIhAMUmHz8z1I7ese9mPY2kB5ZXjVk+xYM7RAb5ZGusuhYp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9855},"main":"dist/index.js","gitHead":"a1fec5cd12c5cd91270bc9ee130e7535b8f69cc6","scripts":{"test":"jest --verbose","build":"webpack","prepublishOnly":"npm run build"},"_npmUser":{"name":"geongu.park","email":"ggus.park@gmail.com"},"repository":{"url":"git+https://github.com/geongupark/responsive-image-map.git","type":"git"},"_npmVersion":"10.8.1","description":"Responsive map according to image size","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","webpack":"^5.93.0","@babel/cli":"^7.24.8","@babel/core":"^7.25.2","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","@babel/preset-env":"^7.25.3","jest-environment-jsdom":"^29.7.0"},"_npmOperationalInternal":{"tmp":"tmp/responsive-image-map_1.0.2_1722598645363_0.5303939957795978","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"responsive-image-map","version":"1.0.4","keywords":["responsive","image","map","javascript"],"author":{"name":"geongu.park"},"license":"MIT","_id":"responsive-image-map@1.0.4","maintainers":[{"name":"geongu.park","email":"ggus.park@gmail.com"}],"homepage":"https://github.com/geongupark/responsive-image-map#readme","bugs":{"url":"https://github.com/geongupark/responsive-image-map/issues"},"dist":{"shasum":"212870b0222b3299952d4112427c0d45db81abba","tarball":"https://registry.npmjs.org/responsive-image-map/-/responsive-image-map-1.0.4.tgz","fileCount":10,"integrity":"sha512-yzFfF034ipil1ryWULKVaEYPr/J2SPWAqU3RMktDAQWhU94cKnaRlX+6Spm61W98Ae1Sxd0Eq6lKYIl/ZVH6oA==","signatures":[{"sig":"MEUCICmT8Dnrx+wwDtKn+rCxutp7bn4ydIgU89j+0hFIm5o7AiEAsOgRAVps1jl1KjWI7KbXuOs/olhSDQaMwrbeqnwPEg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11504},"main":"dist/index.js","gitHead":"e6c77351e405136b0de4904da40dfa7297e1458b","scripts":{"test":"jest --verbose","build":"webpack","prepublishOnly":"npm run build"},"_npmUser":{"name":"geongu.park","email":"ggus.park@gmail.com"},"repository":{"url":"git+https://github.com/geongupark/responsive-image-map.git","type":"git"},"_npmVersion":"10.8.1","description":"Responsive map according to image size","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","webpack":"^5.93.0","@babel/cli":"^7.24.8","@babel/core":"^7.25.2","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","@babel/preset-env":"^7.25.3","jest-environment-jsdom":"^29.7.0"},"_npmOperationalInternal":{"tmp":"tmp/responsive-image-map_1.0.4_1722673039915_0.8155101768494211","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"responsive-image-map","version":"1.0.5","keywords":["responsive","image","map","typescript","javascript"],"author":{"name":"geongu.park"},"license":"MIT","_id":"responsive-image-map@1.0.5","maintainers":[{"name":"geongu.park","email":"ggus.park@gmail.com"}],"homepage":"https://github.com/geongupark/responsive-image-map#readme","bugs":{"url":"https://github.com/geongupark/responsive-image-map/issues"},"dist":{"shasum":"dd56ce9d545a38152cc28cfab9d74d2b2f0b3e15","tarball":"https://registry.npmjs.org/responsive-image-map/-/responsive-image-map-1.0.5.tgz","fileCount":11,"integrity":"sha512-FX4EGO2hTxc+i0sACkVBWQxSkNE6ldp9XKOemFcIdMa8cVfxPk9ckWfQ4OxSUJgaSwMraaWjdn83sZ+X9MGNUA==","signatures":[{"sig":"MEUCIGE/5gWvZGUuJGAY1e/yPGyvhwh8E325bmqKyMgZV57LAiEAxnV4FhEBuY320U9wXfT+Pz4DrQOBicnCUCNM4lM3bs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12688},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"95aefe5f75f5e3aecdc7c7a78a07251a210f1e6a","scripts":{"test":"jest --verbose","build":"webpack --config webpack.config.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"geongu.park","email":"ggus.park@gmail.com"},"repository":{"url":"git+https://github.com/geongupark/responsive-image-map.git","type":"git"},"_npmVersion":"10.8.1","description":"Responsive map according to image size","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.2.4","webpack":"^5.93.0","ts-loader":"^9.5.1","@babel/cli":"^7.24.8","typescript":"^5.5.4","@babel/core":"^7.25.2","@types/jest":"^29.5.12","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","@babel/preset-env":"^7.25.3","jest-environment-jsdom":"^29.7.0","@babel/preset-typescript":"^7.24.7"},"_npmOperationalInternal":{"tmp":"tmp/responsive-image-map_1.0.5_1723284938665_0.842303892739517","host":"s3://npm-registry-packages"}},"1.0.6":{"name":"responsive-image-map","version":"1.0.6","description":"Responsive map according to image size","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"webpack --config webpack.config.js","prepublishOnly":"npm run build","test":"jest --verbose"},"repository":{"type":"git","url":"git+https://github.com/geongupark/responsive-image-map.git"},"keywords":["responsive","image","map","typescript","javascript"],"author":{"name":"geongu.park"},"license":"MIT","bugs":{"url":"https://github.com/geongupark/responsive-image-map/issues"},"homepage":"https://github.com/geongupark/responsive-image-map#readme","devDependencies":{"@babel/cli":"^7.24.8","@babel/core":"^7.25.2","@babel/preset-env":"^7.25.3","@babel/preset-typescript":"^7.24.7","@types/jest":"^29.5.12","babel-loader":"^9.1.3","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","ts-jest":"^29.2.4","ts-loader":"^9.5.1","typescript":"^5.5.4","webpack":"^5.93.0","webpack-cli":"^5.1.4"},"_id":"responsive-image-map@1.0.6","gitHead":"2ceb4ec82f5a98d7ce601368b0e3ba250e9c1142","_nodeVersion":"20.16.0","_npmVersion":"10.8.1","dist":{"integrity":"sha512-SCB0uv0WhaC9HmdX2IbgYY9ak3Jn+1pRtn/aO5oxQDTtgN5PGw3lnA4fUj5XvzT3NiDa+1b92Dgwx5r1rZLeQA==","shasum":"08539d6d5cd8ad22c0d71d4590eb58f8f81a827b","tarball":"https://registry.npmjs.org/responsive-image-map/-/responsive-image-map-1.0.6.tgz","fileCount":5,"unpackedSize":6775,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDX4FrYPVVzvfb6gKxEqUROynUKIiIZUFgl1w/Qmo3MwIgMNkY40lGfVbl7RF9A+gyU9h5RAHRmzWm6u9vx04FZrY="}]},"_npmUser":{"name":"geongu.park","email":"ggus.park@gmail.com"},"directories":{},"maintainers":[{"name":"geongu.park","email":"ggus.park@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/responsive-image-map_1.0.6_1723287642841_0.9451162688999792"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-01T16:18:48.776Z","modified":"2024-08-10T11:00:43.189Z","1.0.0":"2024-08-01T16:18:49.133Z","1.0.1":"2024-08-01T16:40:36.914Z","1.0.2":"2024-08-02T11:37:25.546Z","1.0.4":"2024-08-03T08:17:20.117Z","1.0.5":"2024-08-10T10:15:38.905Z","1.0.6":"2024-08-10T11:00:43.014Z"},"bugs":{"url":"https://github.com/geongupark/responsive-image-map/issues"},"author":{"name":"geongu.park"},"license":"MIT","homepage":"https://github.com/geongupark/responsive-image-map#readme","keywords":["responsive","image","map","typescript","javascript"],"repository":{"type":"git","url":"git+https://github.com/geongupark/responsive-image-map.git"},"description":"Responsive map according to image size","maintainers":[{"name":"geongu.park","email":"ggus.park@gmail.com"}],"readme":"# responsive-image-map\n\n![npm](https://img.shields.io/npm/v/responsive-image-map)\n![license](https://img.shields.io/npm/l/responsive-image-map)\n![downloads](https://img.shields.io/npm/dt/responsive-image-map)\n\n`responsive-image-map` make map to responsive map according to image size\n\n## Installation\n\n```bash\n# Node Package Manager\nnpm install responsive-image-map\n\n# CDN\n# Opting unpkg or jsdelivr\n<script src=\"https://unpkg.com/responsive-image-map/dist/index.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/responsive-image-map/dist/index.min.js\"></script>\n```\n\n## Usage\n\n### JavaScript\n\n```javascript\n// case1\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Document</title>\n    <script src=\"dist/index.js\"></script>\n  </head>\n  <body>\n    <img\n      src=\"https://github.com/user-attachments/assets/6cf473f8-5004-4972-884b-d5436fece34b\"\n      usemap=\"#image-map-1\"\n      class=\"class1\"\n      style=\"width: 100%; height: 100%\"\n    />\n    <map name=\"image-map-1\">\n      <area\n        shape=\"rect\"\n        coords=\"100,100,200,200\"\n        href=\"https://github.com/geongupark/responsive-image-map/issues/new\"\n        alt=\"Example 1\"\n      />\n    </map>\n    <script>\n      document.addEventListener(\"DOMContentLoaded\", function () {\n        ResponsiveImageMap.makeResponsiveImageMap(\"class1\"); // Add your class names here\n      });\n    </script>\n  </body>\n</html>\n\n// case2\nimport { makeResponsiveImageMap } from \"responsive-image-map\";\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  ResponsiveImageMap.makeResponsiveImageMap(\"class1\", \"class2\"); // Add your class names here\n});\n```\n\n### React\n\n```javascript\nimport React, { useEffect } from \"react\";\nimport { makeResponsiveImageMap } from \"responsive-image-map\";\n\nconst App = () => {\n  useEffect(() => {\n    makeResponsiveImageMap(\"class1\", \"class2\"); // Add your class names here\n  }, []);\n\n  return (\n    <>\n      <img src=\"image1.jpg\" useMap=\"#image-map-1\" className=\"class1\" />\n      <map name=\"image-map-1\">\n        <area\n          shape=\"rect\"\n          coords=\"50,50,150,150\"\n          href=\"https://example.com\"\n          alt=\"Example\"\n        />\n      </map>\n    </>\n  );\n};\n\nexport default App;\n```\n\n### Vue\n\n```javascript\n<template>\n  <div>\n    <img src=\"image1.jpg\" useMap=\"#image-map-1\" class=\"class1\" />\n    <map name=\"image-map-1\">\n      <area shape=\"rect\" coords=\"50,50,150,150\" href=\"https://example.com\" alt=\"Example\" />\n    </map>\n  </div>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue';\nimport { makeResponsiveImageMap } from 'responsive-image-map';\n\nonMounted(() => {\n  makeResponsiveImageMap('class1', 'class2'); // Add your class names here\n});\n</script>\n```\n\n## Contributing\n\nWe welcome contributions!\n\n## License\n\nThis project is licensed under the MIT License\n","readmeFilename":"README.md"}