Turn any part of an image into a hyperlink.

1. Upload the image you want to make clickable.
2. Click Add dot and drag the marker onto the area you want linked.
3. Fill in the title and description, then paste the destination URL as the point's call to action.
4. Repeat for every linked area, then copy the embed snippet into your site.

Which one you need depends on whether the whole image is one link, or different parts go to different places.

1. One link for the whole image

<a href="/pricing">
  <img src="banner.jpg" alt="See pricing plans" style="max-width:100%;height:auto">
</a>

Simple and fully responsive. The alt text is the link text as far as crawlers and screen readers are concerned, so describe the destination, not the picture.

2. Several links, hand-coded as a percentage overlay

<div style="position:relative;display:inline-block;max-width:100%">
  <img src="diagram.png" alt="Product diagram" style="display:block;width:100%;height:auto">
  <a href="/parts/valve"
     style="position:absolute;left:42%;top:38%;width:8%;height:8%"
     aria-label="Valve assembly"></a>
  <a href="/parts/duct"
     style="position:absolute;left:71%;top:22%;width:8%;height:8%"
     aria-label="Duct run"></a>
</div>

This is responsive because every offset is a percentage. It is a reasonable option for three or four static links you rarely touch. You are on the hook for focus styles, hover cards, and editing markup on every page whenever a link changes.

3. Several links, managed visually

<iframe
  src="https://interactiveimage.com/embed/your-map-id"
  style="width:100%;border:0;aspect-ratio:1.6;overflow:hidden;display:block;"
  scrolling="no"
  loading="lazy"
  title="Clickable product diagram"
></iframe>

Same percentage maths, but you click to place points, each one gets a real card with text and media, and the links live in one place instead of being duplicated in every page's markup.

• Use absolute URLs. The embed is its own document, so /pricing would resolve against the embed, not your site. Paste the full https:// URL.
• Open external links in a new tab. Keep your own pages in the same tab so the back button behaves as visitors expect.
• Add tracking to the destination. UTM parameters on the link URL show up in your normal analytics — no extra setup needed to see which points earn clicks.
• Label every point. A point with a URL and no title is invisible to screen readers and confusing on hover. One short title is enough.

• Shoppable lookbooks — each product in a lifestyle photo links to its own product page.
• Parts diagrams — every component links to its spec sheet or SKU.
• Floor plans — each unit links to its listing or booking form.
• Venue and campus maps — each location links to its detail page.

The classic <map> and <area> tags pin each hyperlink to fixed pixel coordinates. The moment the image scales — a narrower column, a phone, a retina screen — the clickable regions drift away from what they're supposed to cover. A percentage-based approach avoids that entirely. See the full comparison.