Hotspots on an image, via API

On this page

Hotspots are an effective way of drawing attention to particular features of an image.

You can add hotspots to 360 spins and also static and zoomable images, using the Hotspots API. This article describes using the Hostpots API.

Note: This single image hotspot documentation is currently being written. The version below is an initial release. More descriptive information is being added throughout September 2021.

The API allows you to add, remove, show and hide hotspots.

Interactive example

Use the buttons to control the hotspots:

Below is the full code for those hotspots.

HTML for the viewer:

<div class="Sirv" id="smv">
  <div data-src="https://demo.sirv.com/Bose-700-a.jpg"></div>
</div>

Script for the hotspots and buttons:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

<script>
/* Hotspot Data */
const hotspots = [
  {
    tooltip: {
      content: '<div><strong>Message title</strong><br>This is a tooltip which shows on hover. <a href="https://example.com" target="_blank">This is a link</a></div>',
      x: -125,
      y: 40
    },
    pointer: {
        x: '30%',
        y: '62%'
    }
  },
  {
    box: {
      content: '<div><strong>This is a message</strong><br>Messages show on click. They can contain images and other HTML, for example:<br><img src="https://demo.sirv.com/Bose-700-b.jpg?w=200"></div>',
    },
    pointer: {
      x: '70%',
      y: '69%'
    }
  }
];

/* API Methods */
function addHotspots() {
  Sirv.getInstance('#smv').child(0).image.hotspots.add(hotspots);
}

function removeHotspot(hotspotIndex) {
  Sirv.getInstance('#smv').child(0).image.hotspots.remove(hotspotIndex);
}

function removeAllHotspots() {
  Sirv.getInstance('#smv').child(0).image.hotspots.removeAll();
}

function disableHotspot(hotspotIndex) {
  Sirv.getInstance('#smv').child(0).image.hotspots.disable(hotspotIndex);
}

function enableHotspot(hotspotIndex) {
  Sirv.getInstance('#smv').child(0).image.hotspots.enable(hotspotIndex);
}
</script>

Hotspot API methods

The following hotspot API methods are available:

Sirv.getInstance('#smv').child(0).image.hotspots.add();
Sirv.getInstance('#smv').child(0).image.hotspots.remove();
Sirv.getInstance('#smv').child(0).image.hotspots.removeAll();
Sirv.getInstance('#smv').child(0).image.hotspots.enable();
Sirv.getInstance('#smv').child(0).image.hotspots.disable();

To show the hotspots on page load, add them with a script, for example:

<script>
  Sirv.on('image:ready', (image) => {
    image.hotspots.add(hotspots);
  });
</script>

Was this article helpful?

Get help from a Sirv expert