Contents
Links and Actions - Plugixa Image Map
On the Behaviour tab, When clicked decides what a click or tap does.
| Choice | What happens |
|---|---|
| Do nothing | The hotspot only shows its tooltip. |
| Open a link | Takes the visitor to an address. |
| Send an event to the page | Tells your own JavaScript that this hotspot was used. |
| Show floor PRO | Switches to another floor of the same map. See Floors. |
Open a link
Type the address and choose whether it opens in a new tab.
Accepted addresses start with https://, http://, mailto: or tel:, or are
relative, such as /contact/ or #pricing. Anything else, including
javascript:, is refused when the map is saved.
A link that opens in a new tab is always printed with rel="noopener".
A hotspot with a link is a real link in the page. It works without JavaScript, can be opened in a new tab with a middle click, and is followed by search engines.
Send an event to the page
There is no “run this script” option, on purpose: a map can be edited by people who should not be able to put code on your site. Instead a hotspot can announce that it was clicked, and code you already control decides what to do.
Give the event a name, for example store-selected. When a visitor clicks the
hotspot, the map sends two events:
| Event | Use it when |
|---|---|
plugixa-image-map:action |
One listener should hear about every hotspot on every map. |
| The name you typed | Your code cares about this hotspot only. |
Both carry the same details: the map’s id, the hotspot’s id and the event name.
document.addEventListener( 'plugixa-image-map:action', ( e ) => {
console.log( e.detail.mapId, e.detail.id, e.detail.event );
} );
More events are listed in Hooks.
Links and tooltips together
A hotspot can have both. On a computer, pointing shows the tooltip and clicking follows the link. A touch screen has no hover, so there a tap goes straight to the link. If phone visitors must read the tooltip first, put the link inside the tooltip text instead of on the hotspot.