Image Map Generator

Create an HTML image map online in seconds with this free image map generator. Upload any image, then draw clickable rectangle, circle and polygon hotspots directly on top of it, assign a link URL, alt text, title and target to each area, and instantly get clean <img usemap>, <map> and <area> HTML you can copy or download. Coordinates are calculated from your image's natural pixel size, so the exported coords match perfectly, and you can optionally embed the image as a data URI or turn on a responsive rescaling script. Everything runs 100% in your browser — your image is never uploaded to any server, so it stays completely private.

🔒 100% private — files never leave your device

Loading…

How to use

  1. Upload or drop an image to use as the base for your clickable image map.
  2. Pick the rectangle, circle or polygon tool and draw hotspot areas over the parts you want to link.
  3. Select each area to set its link URL, alt text, title and whether it opens in a new tab.
  4. Copy the generated <map> and <area> HTML or download it as a ready-to-use .html file.

Frequently asked questions

What is an HTML image map?

An HTML image map lets you make different regions of a single image link to different destinations. It uses an <img> tag with a usemap attribute plus a <map> element containing <area> tags — one clickable area per hotspot. This tool draws those areas visually and writes the exact coords for you.

What image formats can I use?

You can use any image format your browser can display, including JPG, PNG, WebP and GIF. The tool reads the image's natural pixel dimensions so the exported coordinates line up exactly with the picture.

Is my image uploaded or kept private?

Your image is never uploaded. The whole image map generator runs 100% in your browser, so the picture and the HTML you create stay on your device and nothing is sent to any server.

What shapes can I draw as clickable areas?

You can draw rectangles, circles and polygons. Rectangles and circles are drawn by dragging, and polygons are built by clicking each point then double-clicking (or pressing Enter) to close the shape. Each area exports the correct shape and coords attributes.

Can I set links, alt text and open areas in a new tab?

Yes. For every area you can set the link URL (href), alt text, a title tooltip and the target. Choosing to open in a new tab sets target="_blank" and automatically adds rel="noopener" for safety.

How do I make the image map responsive?

Turn on the responsive option and the exported code adds a small script plus data-coords attributes that rescale the area coordinates whenever the image is resized. You can also embed the image as a data URI so the snippet works as a self-contained block.

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