Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jamietre/ImageMapster

jQuery plugin for enhancing HTML Image maps
https://github.com/jamietre/ImageMapster

Last synced: 3 months ago
JSON representation

jQuery plugin for enhancing HTML Image maps

Host: GitHub
URL: https://github.com/jamietre/ImageMapster
Owner: jamietre
License: mit
Created: 2011-04-21T17:43:45.000Z (over 13 years ago)
Default Branch: main
Last Pushed: 2024-05-02T03:08:23.000Z (7 months ago)
Last Synced: 2024-07-20T04:25:45.337Z (4 months ago)
Language: JavaScript
Homepage: http://jamietre.github.io/ImageMapster/
Size: 9.7 MB
Stars: 815
Watchers: 45
Forks: 335
Open Issues: 23
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Support: SUPPORT.md

Awesome Lists containing this project

README

        # ImageMapster: A jQuery Plugin to make image maps useful

[![license](https://img.shields.io/github/license/jamietre/ImageMapster)](LICENSE)

[![gh stable](https://img.shields.io/github/v/release/jamietre/imagemapster?sort=semver&label=stable)](https://GitHub.com/jamietre/ImageMapster/releases/)

[![gh latest](https://img.shields.io/github/v/release/jamietre/imagemapster?include_prereleases&sort=semver&label=latest)](https://GitHub.com/jamietre/ImageMapster/releases/)

[![npm downloads](https://img.shields.io/npm/dm/imagemapster?label=npm)](https://www.npmjs.com/package/imagemapster)

[![jsDelivr downloads](https://data.jsdelivr.com/v1/package/npm/imagemapster/badge?style=rounded)](https://www.jsdelivr.com/package/npm/imagemapster)

[![cdnjs version](https://img.shields.io/cdnjs/v/imagemapster.svg?color=orange)](https://cdnjs.com/libraries/imagemapster)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![Deploy to GitHub Pages](https://github.com/jamietre/ImageMapster/actions/workflows/gh-pages-deploy.yml/badge.svg)](https://github.com/jamietre/ImageMapster/actions/workflows/gh-pages-deploy.yml)

ImageMapster activates the areas in HTML image maps so you can highlight and select them. It has lots of other features for manual control, tooltips, resizing, and more. It is designed to be compatible with every common platform, and is tested with Internet Explorer 6-10, Firefox 3.0+, Safari, Opera, and Chrome. It works on mobile devices and doesn't use Flash.

## Documentation

See the [ImageMapster website](https://jamietre.github.io/ImageMapster) for full documentation including [how to get started](https://jamietre.github.io/ImageMapster/overview/getting-started/), [demos](https://jamietre.github.io/ImageMapster/overview/demos/), and [live examples](https://jamietre.github.io/ImageMapster/resources/live-examples/).

## Release Information

See the [change log](CHANGELOG.md) for details on the release history and roadmap.

## Support

See the [support page](SUPPORT.md) for details on how to obtain support.

## Contributing

See the [contributing guidelines](CONTRIBUTING.md) for details on how to contribute.

## Development

The below covers the ImageMapster jQuery plugin. For information on how to develop the ImageMapster website, see its [README](site/README.md).

You can simultaneously make changes to both the plugin and the website by running `npm run dev` in both the plugin (`./`) and site (`./site`) directories. Any changes made to the plugin will be reflected in the site as it is [imported directly](./site/src/components/demos/core/scripts.astro#L20) from the build output.

### Build

The source code is broken into several modules to make management easier and to make it possible to create feature-targeted builds. ImageMapster is built using grunt and can be invoked as follows:

1. Clone the repo

2. Install NPM dependencies - `npm install`

3. Generate a Build:

   - Debug Build (uncompressed) - `npm run build`

   - Release Build (uncompressed/compressed/sourcemap) - `npm run dist`

### Dev

1. Clone the repo

2. Install NPM dependencies - `npm install`

3. Run the dev task - `npm run dev`

### Tests

1. Clone the repo

2. Install NPM dependencies - `npm install`

3. Run the test task - `npm run test`

> ℹ️ **Note**

>

> By default, tests will run using the latest version of jQuery. The library to use when running tests can be changed via the dropdown.

![Test Runner Library](testrunnerlibrary.png)

### Examples

1. Clone the repo

2. Install NPM dependencies - `npm install`

3. Run the example task - `npm run example`

> ℹ️ **Note**

>

> By default, examples will run using jQuery. To run examples using Zepto, modify the examples HTML file (e.g., [USA](./examples/usa.html)) as follows, commenting out references to jQuery scripts and uncommenting references to zepto scripts.

```diff

...

+ 

- 

+ >

...

```

### Docs

> ℹ️ **Note**

>

> The docs have not been maintained and therefore are not under version control.

1. Clone the repo

2. Install NPM dependencies - `npm install`

3. Run the doc task - `npm run doc`

## License

Copyright © 2011-24 [James Treworgy](https://github.com/jamietre). Licensed under the [MIT License](LICENSE).