A modern alternative to HTML image maps.

The <map> and <area> tags were designed in an era of fixed-width pages. An area's coords attribute is a literal set of pixel values measured against the image's natural size:

<img src="diagram.png" usemap="#m" width="1200" height="800">
<map name="m">
  <area shape="circle" coords="600,400,24" href="/valve" alt="Valve">
</map>

Add responsive CSS so the image scales to fit any screen, and the browser resizes the pixels it paints without touching coords. On a narrow phone the visible valve might sit at 195,130 on screen while the area still claims 600,400 — a point that's no longer on the picture. The full math is in the responsive image map generator.

1. Upload the same image you used in the original <map>.
2. Recreate each area as a hotspot. For a circle, click its center. For a rect or poly, click the center of its bounding box.
3. Carry over the href as the hotspot's CTA URL, and optionally add a title and description the old markup couldn't show.
4. Publish and swap the markup. Replace the img + map + area block with the single iframe snippet.

Legacy areas only ever responded to a click (or an unreliable hover-tooltip via the title attribute). Hotspots give you a choice on desktop — hover for fast previews, or click when you want a deliberate open — and automatically switch to tap on phones and tablets, since hover doesn't exist there.

Use the same JPG, PNG, or WebP file you'd have referenced in the old <img> tag — nothing about the source image needs to change. Aim for roughly 1200–2400px on the long edge so hotspot popups stay sharp. Unlike the original markup, the embed is responsive by default: hotspots hold their position at any width, and popups reflow into full-width cards on small screens.

A well-built <area> needs a manual alt on every shape and relies on the browser's native focus order, which varies across browsers for overlapping shapes. Hotspots are consistently tab-focusable, open with Enter or Space, and close with Escape, with no per-shape accessibility markup to maintain. See accessible image maps for the full comparison.

Inline <area href> links are part of your page's own crawlable markup; an iframe embed's internal links are not. That doesn't lower your page's ranking — it means the interactive layer doesn't itself contribute indexable text. Compensate the same way good image map pages already should: descriptive alt text on the image, and real paragraph copy on the page explaining what the image shows. Details in image map SEO.

Use a hosted hotspot embed when you need mobile responsiveness, popup content, visual marker styling, or ongoing edits by non-developers. Raw HTML image maps are still useful for simple fixed-size link regions, but they are not a great fit for polished interactive content.

Migrating is free to try: one map with a limited hotspot allowance on the free plan, with a small watermark on the embed. Pro is $5/month and removes the watermark once you're ready to publish the replacement for good.