Create an HTML image map

Build a clickable HTML image map in seconds: upload an image, draw rectangle, circle and polygon hotspots, then assign a link to each area. Everything runs in your browser — your image is never uploaded, so it stays completely private.

Loading…

Ad

How to use

  1. Select or drop the image you want to make clickable.
  2. Pick a shape (rectangle, circle or polygon) and draw a hotspot over the area.
  3. Give each area a link URL, plus optional alt text, title and target.
  4. Copy the generated <map> / <area> HTML, or download it as a ready-to-use .html file.

Frequently asked questions

What is an HTML image map?

An image map is a single image with multiple clickable regions, defined by <area> elements inside a <map> and linked to the image with the usemap attribute. Each area can point to a different URL.

Are responsive image maps supported?

Classic <area> coordinates are pixel-based against the image’s natural size. Turn on “Responsive output” and the generated code includes a tiny script that rescales the areas as the image resizes, so the map works in fluid layouts too.

Is my image uploaded anywhere?

No. The image is loaded and drawn on entirely in your browser using the Canvas and SVG APIs — nothing is ever sent to a server.

Can I edit the areas after drawing them?

Yes. Select any area to move it, drag its handles to resize or reshape it, change its link, or delete it — the HTML output updates live as you edit.

About this tool

Create an HTML image map online: upload an image, draw rectangle, circle and polygon hotspots, assign links, and copy or download ready-to-use <map> and <area> code with usemap. Everything runs in your browser — your image is never uploaded.

Related tools