Info & Demo

What is a Hotspot?

A hotspot is an invisible clickable box placed over part of an image. You can link it to another page, show a tooltip, or add an effect on hover.

Hotspots make static images interactive — for example:

• Turn a floor plan into a clickable map
• Add links to product images
• Create interactive infographics and diagrams

What is an Imgx?

An Imgx file (_imgx.html) is a self-contained HTML page that combines your image and all of its hotspots. You can:

• Open it directly in a browser like a normal web page
• Embed it into another site while keeping all hotspots interactive
• Re-import it into ImageClix for further editing

Embed Options

Option 1: Direct iframe (works everywhere)

The simplest method—works from local files (file://) and any host.

<iframe src="myimage_imgx.html"
        width="800"
        height="600"
        style="border:none;overflow:hidden;"
        scrolling="no"></iframe>

Tip: Set width/height to your image’s dimensions or any size you prefer.

Option 2: Responsive script embed (HTTP/HTTPS only)

Automatically sizes and preserves aspect ratio from your Imgx. Requires serving files over HTTP/HTTPS (won’t run from file://).

Step 1: Add a container where you want the image:

<div data-imgx="myimage_imgx.html" data-scale="1"></div>

Use data-scale="1" for responsive (fills container width). Use other values (e.g. 0.5, 2) for fixed pixel scaling.

Step 2: Paste this compact script once (before </body>):

<script>window.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("[data-imgx]").forEach(el=>{const s=el.getAttribute("data-imgx"),c=parseFloat(el.getAttribute("data-scale")||1);fetch(s).then(r=>r.text()).then(h=>{const t=document.createElement("div");t.innerHTML=h;const j=t.querySelector("#hotspot-data");if(!j)throw new Error("No hotspot-data in "+s);const d=JSON.parse(j.textContent),a=d.height/d.width,w=document.createElement("div");w.style="position:relative;overflow:hidden;"+(c===1?`width:100%;padding-bottom:${a*100}%`:`width:${d.width*c}px;height:${d.height*c}px`);const f=document.createElement("iframe");f.src=s;f.setAttribute("scrolling","no");f.style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;overflow:hidden";w.appendChild(f);el.appendChild(w);});});});</script>

Notes: Place multiple data-imgx divs to embed many Imgx files—one script handles them all. For responsive layout, wrap your container (e.g. max-width:800px; margin:auto;).