Simple Virtual TourVisit Website →
← Back to blog

Image Gallery Hotspots: Percent Positions and 72x72 Touch Targets

October 4, 2026
Image Gallery Hotspots: Percent Positions and 72x72 Touch Targets

Image gallery hotspots add clickable points to a photo that reveal text, media, or links, letting one image carry the explanatory weight of a caption, a product card, or a guided tour stop. They work for shoppable images, annotated diagrams, and room-by-room walkthroughs. This guide covers how to build them, keep them aligned on any screen, and make them usable for every visitor, including those on a keyboard or screen reader.

TL;DR:

  • Using percentage-based coordinates for hotspots ensures they stay correctly aligned across various screen sizes and device orientations.
  • Hotspots should be accessible by keyboard and screen readers, with focusable elements and descriptive ARIA labels to include all visitors.
  • Building hotspots with a staging process that tests on small screens and keyboard navigation first helps prevent misalignment and accessibility issues later.
  • Integrating hotspots into virtual tour software or platforms simplifies responsive positioning, media lazy-loading, and multi-scene navigation without manual coding.
  • Limiting hotspots to six or seven per image and maintaining consistent marker styles enhances clarity and usability for dense or complex visuals.
Simple Virtual Tour
simplevirtualtour.com
Build More Engaging Virtual Tours
Create interactive tours with customizable hotspots, live sessions, and an intuitive backend, without requiring technical expertise.
Start your free trial

Table of Contents

Use cases and benefits: when hotspots are the right choice

Hotspots earn their place when a single image needs to explain more than a caption can carry. Instead of forcing a visitor to cross-reference a separate list, you let them click directly on the part of the image that interests them.

Retailers use hotspots to turn a lifestyle photo into a shoppable image: a pin on a lamp opens a price and an "add to cart" link, while a pin on a rug opens a different product entirely. Real estate agents and venue owners annotate rooms and points of interest, marking a kitchen island with a renovation note or a conference hall with capacity details. Documentation teams point to specific buttons or menu items in a screenshot, which saves readers from hunting through paragraphs of instructions. Museums and editorial publishers attach localized descriptions, audio clips, or short videos to sections of a larger image, letting one photograph serve several audiences at once.

  • An ecommerce page might turn one styled room photo into five shoppable items, each with its own popup.
  • A real estate listing could place six hotspots across a living room image, each linking to a feature note or a floor plan.
  • A software help article might mark three buttons on one screenshot instead of writing three separate instructions.
  • A museum image might offer a hotspot with a 30-second audio clip describing a painting's restoration history.

Each case shares the same logic: the image already shows the thing you want to explain, so the explanation should live right where the eye lands.

Quick implementation checklist: the steps to add hotspots

Building your first hotspot gallery follows a predictable sequence. Work through it once and the next gallery takes a fraction of the time.

  1. Choose and prepare the image. Crop to a sensible aspect ratio, compress it for web use, and write real alt text that describes the scene, not just "image."
  2. Pick marker styles and a placement strategy. Decide whether pins, numbered circles, or outlined shapes fit your content, and store each position as a percentage of width and height rather than a fixed pixel.
  3. Write concise popup content. Give each hotspot a short title, one or two supporting lines, and an optional link or piece of media. Resist the urge to paste in a paragraph.
  4. Configure the trigger and dismiss behavior. Decide whether hotspots open on click, hover, or tap, how touch devices should behave, and how a visitor closes the popup, whether that's a close button, an outside click, or the Escape key.
  5. Preview across desktop and mobile widths. Resize the browser, check a phone-sized viewport, and confirm every marker still sits on its intended target.
  6. Publish through your chosen route. Depending on your platform, that might mean a WordPress block, a shortcode, an embed snippet, or a JavaScript initialization call.

The part most people skip is the resize check. A hotspot that looks perfect on a 1,440 pixel desktop screen can drift noticeably on a 375 pixel phone if its position was set in fixed pixels instead of percentages. Testing early avoids a rebuild later.

Pro Tip: Build and test your first hotspot gallery on the narrowest screen width you expect visitors to use, then scale up. Fixing alignment on a small screen first catches problems that only show up when space is tight.

Responsive positioning: percentage coordinates, resizing, and library patterns

A hotspot is only useful if it stays on the thing it's pointing to, and that's where many first attempts go wrong. Native HTML image maps define coordinates in fixed pixels tied to the image's original dimensions, and MDN's guidance on hit maps notes that resizing the image alone leaves those coordinates mismatched, since the map doesn't scale with the picture.

The fix is to store every hotspot position as a percentage of the image's width and height rather than a pixel count.

  • Percentage coordinates survive window resizing, orientation changes, and responsive breakpoints without extra code.
  • Libraries that reposition markers on resize typically listen for a resize or orientation event and recompute each pin's pixel position from its stored percentage.
  • Native image maps using the <map> and <area> elements work for fixed layouts but need extra JavaScript to stay accurate on a fluid page.
  • Reusing a single <map> across multiple images can produce confusing focus order or skipped regions, so it's worth testing carefully if you go that route, as the HTML specification describes.

Pro Tip: If you're building hotspots from scratch, store positions as percentages in your data layer from day one. Retrofitting pixel-based coordinates into percentages later means recalculating every single marker.

Accessibility checklist: keyboard, ARIA, alt text, and touch targets

Hotspots that only work with a mouse exclude a meaningful slice of your visitors, and the fix is simpler than it sounds. The W3C's image map tutorial lays out the core requirements clearly: every hotspot needs to be reachable without a mouse, and every hotspot needs a text equivalent a screen reader can announce.

  • Make each hotspot a focusable element, typically a button or a link, with a descriptive aria-label or visible text that explains what clicking it does.
  • Give image-map area elements their own alt text, since a region with no label is invisible to assistive technology even though it's clickable.
  • Support Enter or Space to open a hotspot's content and Escape to close it, and move keyboard focus into the popover when it opens so a screen reader user isn't left stranded on the trigger.
  • Size touch targets generously; the W3C's accessibility guidance suggests a minimum of 72 by 72 CSS pixels for touch targets, which reduces accidental taps on crowded images and gives every visitor room to tap accurately.
  • Space markers apart on dense images so neighboring hotspots don't overlap at small screen sizes.

Testing takes three passes: navigate the entire gallery using only the Tab and Enter keys, run a screen reader over the page to confirm each hotspot announces something meaningful, and load the page with images turned off to check that alt text and any equivalent list still make sense without the picture. The same tutorial recommends this images-off check specifically because it reveals whether your nonvisual content stands on its own, rather than depending on the visual layout to make sense.

Publishing and integration routes: WordPress, H5P, no-code widgets, and JS libraries

Once you know what you want to build, the question becomes where to build it. Four routes cover most projects, and each trades ease of use against control.

  • WordPress plugins, blocks, and shortcodes fit teams already running a WordPress site. A plugin such as PleaseUp's hotspot plugin adds a visual editor inside the dashboard, though it's worth checking how it stores hotspot data, since a plugin that loads heavy scripts on every page can slow the site down even when hotspots appear on just one.
  • H5P offers an open-source content type built specifically for interactive images, and it embeds into learning platforms through a direct embed, an LTI connection, or a WordPress plugin. It suits educators and course creators who already work inside a learning management system.
  • Hosted no-code widgets let you build a hotspot gallery on a third-party dashboard and paste a short embed snippet into your page. They're fast to set up and often come with a free tier, though advanced features usually move you into a paid plan, and pricing for tools like H5P and similar widgets changes over time, so it's worth checking current terms before committing.
  • Framework-agnostic JavaScript libraries suit developers who want full control over zoom, pan, multi-scene navigation, and accessible popover behavior, built directly into an existing site rather than loaded from a third party.

The trade-off is consistent across all four: the easier the setup, the less control you have over markup, styling, and page weight. A WordPress block gets something live in minutes; a custom JS implementation takes longer but gives you precise control over how it behaves and loads.

Design rules and content guidelines for useful, clickable hotspots

A technically correct hotspot still fails if nobody understands what to click or what they'll find. A few rules keep galleries clear.

  • Lead each popup with a short title, followed by one or two supporting lines; a visitor scanning an image shouldn't have to read a paragraph to understand one point.
  • Avoid overcrowding a single image with markers. Once you pass six or seven hotspots, consider grouping them with filters, splitting them into a numbered tour sequence, or offering a list-based navigation alongside the image.
  • For dense images like floor plans or technical diagrams, add zoom and pan so visitors can get close to a cluster of markers without them overlapping.
  • Lazy-load any heavy media inside a popup, such as video or a large photo, so the gallery's initial load stays fast.
  • Use one consistent marker style throughout a gallery, whether that's a pulsing dot, a numbered circle, or a plus icon, so visitors learn the visual cue once and reuse it on every image.

Pro Tip: If you're writing hotspot captions for a trade show display or event exhibit, borrow the discipline from exhibition caption writing, which keeps copy short enough to read at a glance from a few feet away.

Consistency matters more than cleverness here. A gallery where every hotspot uses the same shape, color, and open animation feels predictable in a good way, letting visitors focus on the content rather than relearning the interaction each time.

Hotspot layer vs image gallery/lightbox: roles and combination patterns

A gallery and a hotspot layer solve different problems, and conflating them is a common source of confusing interfaces. A gallery or lightbox, the kind PhotoSwipe documents, handles navigation between images and detailed zoom on one image. A hotspot layer sits on top of a single image and adds contextual explanations or links tied to specific regions.

The two combine well when each keeps its own job. A hotspot can open a lightbox for a closer look at one detail, or a zoomable viewer can carry hotspots that stay anchored to their percentage positions as the visitor zooms in. What breaks the experience is stacking two primary interactions on the same click target, so a region shouldn't simultaneously trigger a hotspot popup and open a lightbox from the same tap. Pick one primary action per interactive area, and keep the close behavior consistent: if Escape closes a hotspot popup, it should also close the lightbox, not just one of the two.

Comparison of hotspot layers and lightboxes

How Simple Virtual Tour supports hotspot workflows

Simple Virtual Tour builds hotspot positioning on percentages by design, so markers stay aligned whether a tour loads on a phone or a desktop monitor. The editor supports multi-scene navigation, letting a single hotspot link from one image or panorama to the next, along with zoom and pan controls for dense scenes and accessible popovers for the content each hotspot reveals.

That maps directly onto the checklist earlier in this guide. Instead of hand-coding percentage math or wiring up resize listeners, the backend handles repositioning automatically, and instead of building a keyboard-accessible popover from scratch, the editor includes one. You still choose your images, write your popup content, and decide where markers go, but the responsive and accessibility groundwork comes built in.

For a closer look at real workflows, the guide on interactive map hotspots walks through a mobile-first placement checklist, and the virtual tour hotspot design checklist covers accessibility considerations specific to multi-scene tours.

How Simple Virtual Tour supports hotspot workflows — overview diagram

Author perspective from Andrea: practical pitfalls and a starter checklist

A full virtual tour makes sense when you have multiple scenes to connect. A single annotated image, on the other hand, rarely needs more than a lightweight hotspot layer, and reaching for heavier tooling too early just adds setup time you don't need yet.

The mistakes I see most often are the same three: too many pins crammed onto one image, alt text that says "icon" instead of describing the actual content, and keyboard users left out entirely because every hotspot only responds to a mouse click.

Start smaller than you think you need to. Build one page with three to eight hotspots, test it on a phone, then tab through it with a keyboard before you touch a second image. If that first gallery holds up under both tests, the next one will take a fraction of the effort.

— Andrea

Try virtual tour software to implement hotspots

If you'd rather skip the manual percentage math and popover coding, virtual tour software can provide an editor built for exactly this: place a marker, set its content, and it stays anchored across screen sizes automatically. Multi-scene tours may let you connect hotspots across several images, and you can choose cloud hosting or a self-hosted setup depending on your preference for data control.

Simple Virtual Tour

  • Start with the Free Forever plan to test a hotspot gallery.
  • Compare the XS, S, M, L, and XL plans, or the one-time CORE purchase, on the pricing page.
  • Browse templates and tutorials, including the hotspot templates guide, to shorten setup time.

Head to the buy page to pick a plan and publish your first hotspot gallery today.

FAQ

What are hot spots in photos?

Hotspots are clickable points placed on specific regions of a photo that reveal extra information when clicked, hovered, or tapped. They typically open a short popup with text, an image, a link, or a video tied to that exact part of the picture.

What is a perfect example of a hot spot?

A product photo of a furnished room with a pin on each item, where clicking the pin on a chair opens its price and a link to buy it, is a common and effective example. A floor plan with a pin on each room that opens a short description works the same way for real estate listings.

What is the best website for images?

There's no single best source, since the right choice depends on whether you need stock photography, your own product shots, or custom panoramas for a tour. For hotspot galleries specifically, images you control the rights to and can re-edit or re-crop as needed tend to work better than generic stock photos.

Where can images be found?

Images come from your own photography, stock photo libraries, or, for business use, product photography and professional panoramas shot for the specific project. Whatever the source, confirm you hold the rights to publish the image before adding hotspots or a popup link to it.

Sources