Image Hotspots
Add interactive hotspots to any image with zoom, popovers, and full accessibility. Zero dependencies, under 10 KB gzipped.
Quick Start
Up and running in under a minute
Install from npm or load from CDN — choose the method that fits your workflow.
Install via npm
npm install @cloudimage/hotspotimport CIHotspot from '@cloudimage/hotspot';
const viewer = new CIHotspot('#my-image', {
src: 'https://example.com/room.jpg',
hotspots: [
{
id: 'sofa',
x: '40%', y: '60%',
label: 'Modern Sofa',
data: { title: 'Sofa', price: '$899' }
}
]
});Use via CDN
<script src="https://cdn.cloudimage.io/hotspot/1.1.13/hotspot.min.js"></script>
<div
data-ci-hotspot-src="/room.jpg"
data-ci-hotspot-items='[{"id":"sofa","x":"40%","y":"60%","label":"Sofa"}]'
></div>
<script>CIHotspot.autoInit();</script>Interactions
Trigger Modes
Choose how popovers are activated: hover for desktop, click for touch, or show on load for key items.
Hover
Click
Load
Theming
Themes & Custom Styling
Built-in light and dark themes. Customize every detail with 40+ CSS custom properties.
Light Theme
Dark Theme
Custom Styling
Navigation
Multi-Image Navigation
Navigate between scenes with hotspot-driven transitions. Click the arrow markers to move between rooms.
Playground
Interactive Configurator
Toggle options and see the generated code update in real time.
Preview
Options
Generated Code