Image map converter: turn <map> and <area> into responsive HTML.

An <area> element's coords attribute is measured in CSS pixels against the image's intrinsic size. A 1200px-wide floor plan with a region at coords="80,120,340,420" works perfectly at 1200px wide. Render the same image at 480px inside a phone layout and the browser still treats those numbers as 80px and 120px from the top-left — now roughly two and a half times too far right and down. The clickable area drifts off the thing it describes.

There is no attribute that fixes this. The historical workaround was a JavaScript library that recalculated every coordinate on resize, which adds a dependency, a layout-shift flash, and one more thing to break. Positioning with percentages removes the problem instead of patching it.

Copy the block and paste it into any HTML or custom-code element. Update the src if your image lives at a different URL than the original markup referenced. The wrapper is display:block; max-width:100%, so it fills whatever column you drop it into and the regions follow the image.

Adjust the hover styling to match your brand — the default is a translucent blue fill with an inset outline, which reads clearly on both photographs and technical drawings. If you want no visible affordance at all, delete the .imap-area:hover rule, but keep the :focus-visible half so keyboard users can still see where they are.

A converted image map is still just links: click, navigate away. That is the right answer for navigation, and the wrong one when the point is to explain something in place — a product diagram, an HVAC assembly, a venue layout, a floor plan with prices and photos per unit.

For that, hotspots need cards: a title, a description, an image, and an optional call to action that opens on hover on desktop and on tap on mobile, without leaving the page. That is what the visual builder produces, and it exports as a single embed you paste once.