CSS image map generator — percentages instead of pixel coordinates.

A legacy image map hard-codes pixels. Here is the pattern almost every old generator outputs:

<img src="plan.png" usemap="#rooms" width="1200" height="800">
<map name="rooms">
  <area shape="rect" coords="120,80,340,260" href="/kitchen" alt="Kitchen">
  <area shape="circle" coords="900,400,40" href="/patio" alt="Patio">
</map>

Those numbers are only correct while the image is painted at exactly 1200×800. Put it in a fluid column, a card, or a phone viewport and the browser scales the picture while coords stays literal. The kitchen region ends up somewhere over the garden, and on a 390px phone most regions fall off the image entirely.

Wrap the image in a relatively-positioned container and place each region absolutely, using percentages derived from the original coordinates:

<div class="imap">
  <img src="plan.png" alt="Ground floor plan of the show home">

  <!-- rect: centre 190,170 on a 1200x800 image -->
  <a class="imap-hit" style="left:15.8%;top:21.3%;width:18.3%;height:22.5%"
     href="/kitchen"><span>Kitchen</span></a>

  <!-- circle: centre 900,400 -->
  <a class="imap-dot" style="left:75%;top:50%"
     href="/patio" aria-label="Patio"></a>
</div>

.imap { position: relative; display: inline-block; max-width: 100%; }
.imap img { display: block; width: 100%; height: auto; }

/* Rectangular region — offsets and size are both percentages */
.imap-hit {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 4px;
}
.imap-hit:hover,
.imap-hit:focus-visible { border-color: currentColor; }
.imap-hit span { position: absolute; left: 0; bottom: 100%; }

/* Point marker — translate keeps the dot centred on its coordinate */
.imap-dot {
  position: absolute;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;   /* or transform: translate(-50%, -50%) */
  border-radius: 50%;
  background: #111;
}
.imap-dot:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

Two details do most of the work. First, the image is display:block; width:100% so the container's box is exactly the image's box — any gap between them shows up as drift. Second, point markers are pulled back by half their own size (negative margins or translate(-50%,-50%)), so the coordinate lands at the marker's centre rather than its top-left corner.

Every percentage comes from the image's natural dimensions. With a 1200×800 image:

One caveat on radius: a circle's radius has no single percentage equivalent, because a percentage width and a percentage height scale differently unless the container is square. Either size the marker in pixels (fine — markers should stay tappable, not shrink to nothing on phones) or use aspect-ratio: 1 with a percentage width.

The markup above is genuinely enough for "make these five rectangles link somewhere". The work multiplies as soon as you want the things people actually ask for:

• Hover cards. A CSS-only tooltip breaks on touch devices, where there is no hover state. You need a click/tap toggle, and then a way to close it.
• Edge collision. A card anchored to a marker near the right edge will overflow the viewport unless you flip its side — that's measurement code, not CSS.
• Letterboxing. The moment the image is inside a container with object-fit: contain, the painted image is smaller than its box and every percentage is measured against the wrong rectangle. See why hotspots drift on mobile.
• Editing by non-developers. Every copy change becomes a code change and a deploy.
• Media in the card. Images and video mean hosting, sizing, and lazy-loading them yourself.

That's the honest boundary. Hand-code it when you need a handful of plain links. Publish an interactive image when you need cards, media, tap behaviour, and content your marketing team can edit without touching the template.

Compare the four options side by side in make an image clickable without an image map, read the HTML image map alternative overview, or start from the image map generator if you'd rather skip the markup entirely. For a purely responsive framing, see the responsive image map generator.