image-hotspot

Image hotspot feature for showing details about specific feature of product

Installation

npm i image-hotspot

HTML

<div class="image-hotspot" data-hotspots='[...]'>
    <img src="./demo/assets/product.jpeg" alt="Product image">
</div>

import ImageHotspots from 'image-hotspot';

const hotspotElm = document.querySelector('.image-hotspot');
const hotspotInstance = new ImageHotspots(hotspotElm);

Hotspot Data

Hotspot data is is array of below type of objects

{
    "name": "touch-control",
    "position": {
        "top": "55%",
        "left": "41%"
    },
    "direction": "up-right",
    "distance": "100px",
    "content": "<h2>Touch controls</h2><p>lorem impsum touch controls</p>"
}

Position

Position is an object with top and left values in percentage format. This value is used to set the hotspot in image and top & left are used to set the offset of it from image.

Directions:

| Direction Name | Value | | ------------- |:-------------:| | Up left | up-left | | Up right | up-right | | Down left | down-left | | Down right | down-right | | Left Up | left-up | | Left down | left-down | | Right Up | right-up | | Right down | right-down |

Distance

Distance is value in pixel and used to set the gap between hotspot and the content for animation while opening it.

Content

Content is HTML string value.