{"id":13554064,"url":"https://github.com/clarketm/image-map","last_synced_at":"2025-04-06T07:13:20.457Z","repository":{"id":40605206,"uuid":"66754826","full_name":"clarketm/image-map","owner":"clarketm","description":"Responsive, dynamic image maps.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:45:09.000Z","size":338,"stargazers_count":128,"open_issues_count":10,"forks_count":29,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T05:06:40.506Z","etag":null,"topics":["clickable-areas","image-map","javascript","jquery","map","responsive-image-map"],"latest_commit_sha":null,"homepage":"https://blog.travismclarke.com/project/imagemap/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clarketm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-28T07:11:01.000Z","updated_at":"2025-03-09T16:13:55.000Z","dependencies_parsed_at":"2023-02-05T02:02:10.134Z","dependency_job_id":null,"html_url":"https://github.com/clarketm/image-map","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarketm%2Fimage-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarketm%2Fimage-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarketm%2Fimage-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarketm%2Fimage-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clarketm","download_url":"https://codeload.github.com/clarketm/image-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445671,"owners_count":20939958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clickable-areas","image-map","javascript","jquery","map","responsive-image-map"],"created_at":"2024-08-01T12:02:38.947Z","updated_at":"2025-04-06T07:13:20.436Z","avatar_url":"https://github.com/clarketm.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","jquery"],"sub_categories":[],"readme":"[![NPM release](https://img.shields.io/npm/v/image-map.svg)](https://www.npmjs.com/package/image-map)\n[![Build Status](https://travis-ci.org/clarketm/image-map.svg?branch=master)](https://travis-ci.org/clarketm/image-map)\n\n# [Image-Map](https://www.travismclarke.com/imagemap/)\n\n[![image-map](https://www.travismclarke.com/imagemap/image-map-yellow.png \"image-map\")](https://www.travismclarke.com/imagemap/)\n\nA native JavaScript solution for creating responsive [image-maps](https://en.wikipedia.org/wiki/Image_map) that rerender on image or viewport changes.\n\n### Check out the **[demo](https://www.travismclarke.com/imagemap/)**!\n\n## Installation\n\n### Install with npm\n```shell\n$ npm install image-map\n```\n\n### Install with bower\n```shell\n$ bower install image-map\n```\n\n### [CDN](https://unpkg.com/browse/image-map/dist/)\n|                        Module (`.es.js`)                  |                        Main (`.js`)                    |                        Main (compressed) `.min.js`         |\n| :-------------------------------------------------------: | :----------------------------------------------------: | :--------------------------------------------------------: |\n| [🔗](https://unpkg.com/image-map/dist/image-map.es.js)    | [🔗](https://unpkg.com/image-map/dist/image-map.js)    | [🔗](https://unpkg.com/image-map/dist/image-map.min.js)    |\n\n## Generating the image map `html`\nYou can generate image maps using this wonderful online tool: https://www.image-map.net/. It works for both local and web images.\n\n## Usage\nAdd an **image-map** to your html page (either create one yourself or try the [online image map generator](https://www.image-map.net/)).\n\u003e An **image-map** is an image with clickable areas. The required `name` attribute of the `\u003cmap\u003e` element is associated with the `\u003cimg\u003e`'s `usemap` attribute and creates a relationship between the image and the map. The `\u003cmap\u003e` element contains a number of `\u003carea\u003e` elements, that defines the clickable areas in the image map.\n\n```html\n\u003cimg usemap=\"#image-map\" src=\"/path/to/image\"\u003e\n\n\u003cmap name=\"image-map\"\u003e\n      \u003carea shape=\"poly\" coords=\"22,22,231,22,264,82,232,143,22,143\"\u003e\n      \u003carea shape=\"poly\" coords=\"233,22,443,22,476,82,442,144,233,143,264,82\"\u003e\n      \u003carea shape=\"poly\" coords=\"445,22,654,22,686,81,654,143,444,143,475,82\"\u003e\n      \u003carea shape=\"poly\" coords=\"655,22,895,22,895,142,655,142,684,82\"\u003e\n\u003c/map\u003e\n```\n\n### JavaScript\n\nTo use this plugin with *only* JavaScript, first include (or import) the `image-map.js` library:\n\n```js\n// using `import`\nimport ImageMap from \"image-map\";\n```\n\n```js\n// using `require`\nvar ImageMap = require(\"image-map\");\n```\n\n```html\n\u003c!-- using `script` --\u003e\n\u003cscript src=\"https://unpkg.com/image-map/dist/image-map.js\"\u003e\u003c/script\u003e\n```\n\nNext, simply call the `ImageMap` constructor:\n\n```js\nImageMap('img[usemap]')\n```\n\nThe default debounce rate is **500**ms. To customize this value, pass a numeric *wait* value as the second argument.\n\n```js\nImageMap('img[usemap]', 500)\n```\n\n### jQuery\n\nTo use this plugin with jQuery, first include both the [jQuery](https://jquery.com/) and `image-map.jquery.js` libraries:\n\n```html\n\u003c!-- using `script` --\u003e\n\u003cscript src=\"https://unpkg.com/jquery/dist/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/image-map/dist/image-map.jquery.js\"\u003e\u003c/script\u003e\n```\n\nNext, simply call the `imageMap` plugin:\n\n```js\n$('img[usemap]').imageMap();\n```\n\nThe default debounce rate is **500**ms. To customize this value, pass a numeric *wait* value as the first argument.\n```js\n$('img[usemap]').imageMap(500);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclarketm%2Fimage-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclarketm%2Fimage-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclarketm%2Fimage-map/lists"}