An Image Hotspot Coordinate Map That Survives a Product Photo Crop

Clickable annotations on a product photo are fragile. A hotspot placed on a screw at pixel 800 by 450 points somewhere else once the photo is cropped for a new layout. This article proposes a way to commission hotspots so they remain meaningful, and a sheet that records what happens to each one. It is a conditional design proposal with hypothetical examples.

Store positions against the original

A durable approach is to record each hotspot as a fraction of the original image, not as pixels on a displayed version. Position x is the distance from the left edge divided by original width, y likewise from the top. Keep the original image identifier alongside, so the mapping always refers to a known file. Store a short label and the thing the hotspot points at, in words, because the words survive when the numbers do not.

Describe each crop as a rectangle

Record every crop as the rectangle it keeps, also in fractions of the original: left, top, width, height. Then a hotspot's position in the cropped view is:

cropped x = (original x minus crop left) divided by crop width cropped y = (original y minus crop top) divided by crop height

If either result falls below 0 or above 1, the hotspot is outside the frame.

Original-to-cropped mapping sheet

Commission one row per hotspot per crop.

The supplier fills the computed columns, and a reviewer spot-checks at least one per crop by eye.

Out-of-frame exception sheet

Some hotspots will fall outside a tighter crop. Decide per hotspot, in advance, among these options:

• Remove it from that crop and list the feature in text beneath the photo.
• Keep the full image available for that feature through a link.
• Replace the hotspot with an edge marker pointing off frame, if the design supports it.

Record the choice and the reason. Never clamp a hotspot to the nearest edge, since it would then appear to mark a different part.

Branching choices

If the crop is a small trim, most hotspots will map with no action beyond recalculation. If the crop changes aspect ratio substantially, expect several out-of-frame cases and plan the text fallback. If the photo is replaced with a re-shot image, the old fractions no longer apply. Treat that as a new original and redo the placement, not a remap.

Hypothetical worked example

Suppose an original photo has three hotspots: a dial at (0.15, 0.40), a port at (0.85, 0.55), and a label at (0.50, 0.90). A square crop keeps left 0.10, top 0.00, width 0.80, height 0.80 in original fractions. The dial maps to x = (0.15 minus 0.10) divided by 0.80 = 0.06, y = 0.40 divided by 0.80 = 0.50. It is in frame, near the left edge. The port gives x = 0.75 divided by 0.80 = 0.94, in frame. The label gives y = 0.90 divided by 0.80 = 1.125, out of frame. The exception sheet records that the label is dropped from the square crop and its content listed in text.

Stop conditions

Stop and return the work if a hotspot is stored only in display pixels, if a crop rectangle is not recorded, or if a mapped hotspot lands within the frame but visibly on a different part than its label. Stop also if a crop is applied to an image that is not the recorded original.

Acceptance checks

Consider the deliverable acceptable when:

• Every hotspot has an original-fraction position, a text label and a named target.
• Every crop has a recorded rectangle.
• The mapping sheet has a computed result and an in-frame flag for each pair.
• Every out-of-frame hotspot has an exception decision.
• A reviewer has confirmed, by eye, at least one hotspot per crop lands on its named part.
• Keyboard users can reach each remaining hotspot, and the text list matches the visible hotspots.

Rerun the sheet whenever a new crop or a replacement photo is introduced.

Sources