Create clickable HTML image maps with rectangular, circular, and polygon hotspots.
Image Map Generator converts regions drawn over one image into the coordinate data used by an HTML image map. Mark a rectangle, circle, or polygon around each pictured target, associate the region with a destination, and use the resulting `<area>` entries inside a named `<map>` referenced by the image's `usemap` attribute. This is geometry, not object recognition: the saved numbers do not know that a polygon surrounds a building or that a circle covers a button. The common surprise is that a correct hotspot can stop matching after the source is cropped, padded, replaced, or displayed at dimensions that no longer correspond to the chosen coordinates.
Each shape has a distinct `coords` grammar. A rectangle is `left,top,right,bottom`; a circle is `center-x,center-y,radius`; a polygon is a sequence of `x,y` vertex pairs. The origin is the image's top-left corner, x moves right, and y moves down. Polygon vertices should follow the boundary in order. The last point connects back to the first, so repeating the opening pair is unnecessary.
HTML connects the pieces by name: `<img usemap="#diagram-map">` selects `<map name="diagram-map">`. Each region becomes an `<area>` whose `shape` and `coords` describe the hit target and whose `href` identifies the destination. A linked area should have useful `alt` text naming its destination or purpose. The map changes where the image acts as a link; it does not alter pixels, cut out regions, or add permanently visible boundaries.
No. `coords` values are numeric positions, not CSS percentage declarations. Enter rectangle edges, a circle center and radius, or polygon vertices in the coordinate system used for the image. If the image must resize, do not replace `100` with `50%`; verify alignment at the rendered sizes and use a responsive image-map approach that updates the numeric coordinates when required.
No. HTML image-map geometry defines clickable regions but does not, by itself, paint persistent outlines or fills over the image. If regions must be visible, include boundaries in the source artwork or add a separately designed visual overlay. Make each link's purpose understandable without relying only on shape or color, and give every linked area meaningful alternative text.
The 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.