Create clickable image maps with hotspot areas that scale responsively across screen sizes.
Upload an image, drag rectangle, circle, or polygon hotspots over it, attach a URL and alt text to each, and export an img with usemap plus a map block of area elements. The tool records every hotspot in the image's intrinsic pixel dimensions, trusting the browser to scale hit-testing proportionally to the rendered size. The common surprise: the map is bound to the file you drew on. Swap the image, serve a different intrinsic size through srcset, or crop with object-fit, and hotspots drift even though the HTML never changed.
A concrete input and expected output from the current implementation.
Input
Image: floor-plan.png, intrinsic 800 x 600 px. One rectangular hotspot from (100, 120) to (400, 380), href https://example.com/kitchen, alt text 'Kitchen'.
Expected output
<img src="floor-plan.png" usemap="#floor-plan-map" alt="Floor plan"> <map name="floor-plan-map"> <area shape="rect" coords="100,120,400,380" href="https://example.com/kitchen" alt="Kitchen"> </map>
Rect coordinates are left,top,right,bottom in the image's intrinsic pixels, so a browser rendering the image at 400px wide maps the hotspot to 50,60,200,190 - exactly half, keeping the hit area on the picture. Nothing in the exported HTML changes when the layout size changes.
When you draw or drag a hotspot, the tool divides the pointer's screen position by the image's current display scale and stores the result in the image's native pixel space. The exported coords values are therefore intrinsic pixels, not screen pixels. The browser performs the inverse scaling during hit-testing, so a map drawn at the image's natural size stays aligned when CSS shrinks or stretches it.
Export produces plain HTML with no JavaScript: an img element carrying usemap="#name" paired with a map element of the same name, containing one area per hotspot. Rect coords are left,top,right,bottom; circle is center-x,center-y,radius; polygon is a repeating x,y list. Hit-testing happens in the browser at click time against the rendered box, and duplicate map names resolve to the first match in document order.
Yes, for ordinary CSS resizing. Modern browsers scale area coordinates proportionally to the image's rendered size, so a map drawn on a 1600px-wide image stays aligned at 400px. The map breaks when the intrinsic size of the image changes (a different srcset file or a regenerated image) or when object-fit crops or letterboxes the picture, because the coordinates are anchored to the original file.
No. The output is standard HTML: an img with a usemap attribute plus a map element of area tags, which every browser handles natively, including mobile browsers. There is no library to load and nothing to initialize. The trade-off is that hotspots are tied to the image element, so they cannot be styled, reordered, or animated like ordinary DOM elements.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.