# pure-rwd-image-maps

> Pure Responsive Image Maps

Latest version **1.0.2** (published 2021-05-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install pure-rwd-image-maps
pnpm add pure-rwd-image-maps
yarn add pure-rwd-image-maps
bun add pure-rwd-image-maps
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-05-11 |
| First published | 2021-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | hikikomori |
| Maintainers | hikiroom |
| Keywords | TypeScript, vanilla, map, rwd, esm |

## Links

- npm: https://www.npmjs.com/package/pure-rwd-image-maps
- Repository: https://github.com/hikiroom/pure-rwd-image-maps
- Homepage: https://github.com/hikiroom/pure-rwd-image-maps#readme
- Issues: https://github.com/hikiroom/pure-rwd-image-maps/issues
- npm.io page: https://npm.io/package/pure-rwd-image-maps

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2021-05-11
- 1.0.1 — 2021-05-07
- 1.0.0 — 2021-05-07

## README

# Pure RWD Image Maps

This is a library to make the coordinate data of the map element associated with the target img element responsive.

Sample: [https://hikiroom.github.io/pure-rwd-image-maps/sample/](https://hikiroom.github.io/pure-rwd-image-maps/sample/)

## Installation

### Script

Download code [here](https://raw.githubusercontent.com/hikiroom/pure-rwd-image-maps/master/dist/pureRwdImageMaps.js).

### ESM

```sh
$ npm install -S pure-rwd-image-maps
```

## Usage

```html
<img src="./image/sample.png" alt="" usemap="#sample1">
<map name="sample1">
    <area alt="square" title="square" href="#" coords="50,50,181,180" shape="rect">
    <area alt="triangle" title="triangle" href="#" coords="401,174,336,288,465,288 " shape="polygon">
    <area alt="circle" title="circle" href="#" coords="685,386,65" shape="circle">
</map>

<script>
const target = document.querySelector('img[usemap="#sample1"]');
const options = {
    autoRwd: true,
    vertical: true,
    horizontal: true,
};
const pureRwdImageMaps = new PureRwdImageMaps(target, options); // No problem without options
</script>
```

## API

### Options

#### `autoRwd`

| Type | Default value |
| :-: | :-: |
| Boolean | true |

Whether to make the coordinate data responsive or not at the same time as initializing the Object.

#### `vertical`

| Type | Default value |
| :-: | :-: |
| Boolean | true |

Whether to make the vertical axis responsive or not.

#### `horizontal`

| Type | Default value |
| :-: | :-: |
| Boolean | true |

Whether to make the horizontal axis responsive or not.

### Instance methods

#### `toRwd`

Make the coordinate data responsive.

*It cannot be executed until the src of the target img element is loaded. You can check if it is loaded or not with `pureRwdImageMaps.loaded`.*

#### `toStatic`

Unresponsive coordinate data.

*It cannot be executed until the src of the target img element is loaded. You can check if it is loaded or not with `pureRwdImageMaps.loaded`.*

## License

Licensed under the MIT license  
https://github.com/hikiroom/pure-rwd-image-maps/blob/master/LICENSE

---
_Source: https://npm.io/package/pure-rwd-image-maps · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._