img-map-area

A library that makes Image Map Area responsive.

• Release Notes.

Features

• One function to make map area responsive.
• Support Typescript.

Installation

# 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:

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

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

window.addEventListener('load', () => {
  // Put .map-area-img selector in the <img /> 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.

// 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.

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

parameters

• imgEl: HTMLImageElement.

createImgMapAreaResponsiveListener

Create a listener to make map area responsive.

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

parameters

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