https://github.com/yisibell/img-map-area

A library that makes Image Map Area responsive.
https://github.com/yisibell/img-map-area

area image-map-area img img-map-area map map-area responsive responsive-image-map-area

Last synced: 2 months ago
JSON representation

A library that makes Image Map Area responsive.

• Host: GitHub
• URL: https://github.com/yisibell/img-map-area
• Owner: yisibell
• License: mit
• Created: 2022-01-20T13:54:50.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-03T02:29:31.000Z (12 months ago)
• Last Synced: 2024-09-13T03:57:40.610Z (3 months ago)
• Topics: area, image-map-area, img, img-map-area, map, map-area, responsive, responsive-image-map-area
• Language: TypeScript
• Homepage:
• Size: 120 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  

  

    

  

  




# img-map-area

A library that makes Image Map Area responsive.

- [Release Notes](./CHANGELOG.md).

# Features

- One function to make **map area** responsive.

- Support Typescript.

# Installation

```bash

# yarn

$ yarn add img-map-area

# npm

$ npm i img-map-area

# pnpm

$ pnpm add img-map-area

```

# Usage

## Example

handling the **img map area** in the whole page:

```js

// src/plugins/responsive-img-map-area.js

import { responsiveImgMapArea } from 'img-map-area'

window.addEventListener('load', () => {

  // Put .map-area-img selector in the  element which will be responsive

  const elements = document.querySelectorAll('.map-area-img')

  const resizeHandler = () => {

    elements.forEach((imgEl) => {

      responsiveImgMapArea(imgEl)

    })

  }

  resizeHandler()

  window.addEventListener('resize', resizeHandler)

})

```

> Or, Just use `createImgMapAreaResponsiveListener` for above does.

``` js

// src/plugins/responsive-img-map-area.js

import { createImgMapAreaResponsiveListener } from 'img-map-area'

createImgMapAreaResponsiveListener()

```

# APIs

## `responsiveImgMapArea`

Handles a single img element, making the associated map area responsive.

```js

import { responsiveImgMapArea } from 'img-map-area'

```

**parameters**

- **imgEl**: `HTMLImageElement`.

## `createImgMapAreaResponsiveListener`

Create a listener to make map area responsive.

```js

import { createImgMapAreaResponsiveListener } from 'img-map-area'

```

**parameters**

- **imgSelector**: A selector string, default is `.map-area-img`.