Image Map Markup Builder

How to use Image Map Markup Builder

Build a fixed-size HTML image map with accessible hotspot links, a real local PNG and coordinate evidence in one ZIP. Turn a diagram, product sheet or original navigation image into a website source kit with deliberate linked regions. Enter the rectangle, circle or polygon coordinates you intend; review equivalent text links and exact area order before using the exported files. The site does not render the generated HTML or open any hotspot destination.

1. Provide local image for the fixed-size map, title, image alternative and hotspot model.
2. Choose the supported mode and run the tool. Review its assumptions and any reported errors.
3. Copy the result or download a separate output; reset to clear the current form.

Good to know

• Static PNG, baseline JPEG or simple VP8/VP8L WebP only: at most 8 MiB per source, 1,000,000 pixels and 2,048 per side. Full structure/CRC/dimension preflight precedes decoding; animated/extended/progressive formats, compressed PNG metadata and supplied SVG are refused. Source names are bounded single-line manifest data of at most 1,024 UTF-8 bytes.
• JSON up to 30,000 UTF-8 bytes with exactly title, alt and areas. Title is a nonblank single-line string up to 200 bytes; overall image alternative up to 500. Define 1–50 areas with exactly shape, coords, alt and href; hotspot alternatives are nonblank single-line strings up to 300 bytes. No arbitrary HTML, CSS, JavaScript, attributes or generated IDs are accepted.
• Coordinates are canonical nonnegative integer JSON strings, not numbers, fractions or exponents. Rectangle uses [left,top,right,bottom] with positive dimensions; circle [centerX,centerY,radius] must have positive radius and fit the bitmap. Polygon has 3–32 distinct vertices, nonzero signed area, no self-crossing or nonadjacent touching edges, and all points inside the image bounds.
• Use canonical absolute HTTP(S) links up to 2,000 bytes without credentials or whitespace. The generator refuses javascript, data, relative, noncanonical or control-containing addresses and never fetches a URL. Supplied links remain visible in the kit; this is not a URL privacy scrubber or live-link checker.
• The image displays at its exact bitmap width and height in CSS pixels. Small screens may scroll horizontally; arbitrary responsive scaling would move the hotspot coordinates. Areas retain source order, so the first matching linked area wins overlapping regions. Equivalent text links provide another way to navigate. No automatic hotspot detection, overlap resolution or responsive coordinate script is generated.
• The real ZIP contains only index.html, image.png and manifest.json. The PNG is a new native decode/re-encode and can lose metadata or change color samples. All text and attributes are escaped; no script or style element is generated, and nothing is mounted in the product page. Native decoding waits at most 10 seconds; PNG encoding at most 5 seconds. All rasters are closed/reset; package content and final ZIP are capped at 8 MiB.
• Extract the kit, review its source and test pointer/keyboard navigation in your target browser before publishing it. The local tool does not install the kit, edit your website, contact destinations, or certify overall website accessibility.
• Structured text output is limited to 500,000 characters. Reduce the supplied source when that separate output budget is exceeded.
• Inputs are processed on this device and are not automatically saved or uploaded.