Make an image clickable without an image map

This is the default answer for most cases, and it is about fifteen lines. Put the image in a relatively-positioned wrapper and absolutely position real <a> elements over it in percentages.

<div style="position:relative; max-width:1200px">
  <img src="diagram.png" alt="Air handler cutaway" style="display:block; width:100%">

  <a href="/parts/valve"
     aria-label="Mixing valve"
     style="position:absolute; left:50%; top:42%;
            width:12%; height:14%; transform:translate(-50%,-50%)">
  </a>

  <a href="/parts/coil"
     aria-label="Heat exchange coil"
     style="position:absolute; left:71%; top:63%;
            width:10%; height:12%; transform:translate(-50%,-50%)">
  </a>
</div>

Every number is a percentage, so the links scale with the picture automatically. Three details make or break it:

• display:block on the image removes the inline-element gap that otherwise shifts everything a few pixels down.
• aria-label on each anchor is not optional — an empty link is invisible to a screen reader.
• Give the anchors a visible affordance (a dot, a ring, a subtle tint on hover). An invisible clickable region is the original sin of image maps; don't reproduce it.

Careful with object-fit: if the image is letterboxed inside its box, percentages of the box are not percentages of the picture. That failure mode is covered in why hotspots drift on mobile.

When the clickable area is a genuinely irregular shape — a country on a map, a seating block, a room outline — SVG is the honest tool. A viewBox gives you a coordinate system that scales with the element, so the responsiveness problem never arises.

<svg viewBox="0 0 1200 600" style="width:100%; height:auto">
  <image href="plan.png" width="1200" height="600" />
  <a href="/rooms/kitchen" aria-label="Kitchen">
    <polygon points="410,120 640,120 640,300 410,300"
             fill="transparent" stroke="none" />
  </a>
</svg>

Costs: the shape coordinates are tedious to author by hand, hit-testing a fill="transparent" shape requires a fill (not none), and any rich content you want on click still has to be built in HTML on top.

Still valid HTML, still supported, and still the wrong default. Its coordinates are absolute pixels measured against the image's natural size, and CSS scaling does not rescale them — so the clickable regions slide off the picture on any responsive layout. It also only produces links: no card, no photo, no description.

It is defensible in exactly one situation: a fixed-width image that will never scale, where you need irregular regions and nothing but links. That situation is rarer every year.

The other three options all assume you are happy maintaining markup. If what you actually want is for a marketing or ops colleague to change a label next quarter without opening a code editor, an embed is the pragmatic answer: place markers visually, and the site holds one iframe that never needs editing again.

It also gets you the things plain anchors don't have: popup cards with a title, description, photo, video, and CTA; colour-coded categories; numbered markers; and edits that propagate to every page hosting the embed at once. The trade-off is that the content lives inside an iframe, so publish the important information as real text on the page too — see SEO for interactive images.

You don't need to re-derive anything. Every old coordinate is relative to the image's natural width and height, so one division per number converts it:

<!-- before: natural size 1200 x 600 -->
<area shape="rect" coords="360,180,480,300" href="/parts/valve">

<!-- centre of that rect: (420, 240) -->
<!-- 420 / 1200 = 35%   240 / 600 = 40% -->

<!-- after -->
<a href="/parts/valve" aria-label="Mixing valve"
   style="position:absolute; left:35%; top:40%;
          transform:translate(-50%,-50%)"></a>

• circle — the first two numbers are already the centre.
• rect — average the x pair and the y pair.
• poly — take the middle of its bounding box, which is close enough for a marker.

Then move each href to the new link and each alt to its label. In practice, clicking the same points on the image in a visual editor is faster than the arithmetic for anything over about six regions — the image map generator page covers that route step by step.

• Give the base image real alt text describing the whole picture, not a list of the regions.
• Every clickable region needs an accessible name — visible text or aria-label.
• Anything clickable must be focusable and operable by keyboard. Real <a> and <button> elements give you this free; a clickable div does not.
• Make the interactive areas visible. Hover-only discovery excludes touch users entirely.
• Don't hide information that exists only inside the image — publish it as text somewhere on the page.