easy-image-hotspot
v0.0.16
Published
A simple image hotspot library using popover API.
Downloads
5
Readme
Under construction... PRs are welcome!
Image Hotspot
This small library is perfect for handling popovers. It uses the latest popover API
How to use it
- Create a new container:
- let container = createContainer();
- Add a background image:
- container.addImage("/world-map.svg", "world map");
- Add as many popovers as you like: for each popover you can specify the x and y coords of the button and the id and text of the popover:
- container.addButton("20%", "50%", "pop1", "test 1");
- container.addButton("40%", "30%", "pop2", "test 2");
- Render the container inside your DOM:
- container.render(document.querySelector("#app"));
- CSS is not perfectly bundled inside JS: you should import it manually in your project, eg:
<link
rel="stylesheet"
href="./node_modules/easy-image-hotspot/dist/style.css"
/>