1.1.0 • Published 3 years ago
image-hotspot v1.1.0
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.