How to create a clickable image map
Image Map Generator is a free tool that turns any image into a clickable image map. Upload an image, draw rectangle or circle areas by dragging, and copy responsive HTML/CSS — no coding required.
What is a clickable area (image map)?
A clickable area lets you place several clickable link regions on a single image — useful when only part of a banner, map, or diagram should be a link. It was traditionally built with the HTML <map> / <area> elements, but those use fixed pixel coordinates and scale poorly, so CSS-based percentage positioning is now the common approach.
How to use it (5 steps)
- 1
Upload an image
Drag & drop or pick a PNG, JPG, SVG, or WebP file.
- 2
Pick a shape and draw
Choose rectangle or circle in the toolbar, then drag on the image to create a link area.
- 3
Set the link
Enter a destination URL and alt text for each area.
- 4
Fine-tune the position
Move existing areas by dragging and resize them with the handles. You can also resize the image (aspect ratio stays locked).
- 5
Copy the code
Choose “CSS (responsive)” or “HTML Map” and copy it with one click.
Rectangle vs. circle
Areas come in two shapes — rectangle (rect) and circle. Pick the one that matches the target.
| Shape | Best for | Example |
|---|---|---|
| Rectangle (rect) | Buttons, cards, text bars and other boxy regions | A CTA button inside a banner |
| Circle (circle) | Icons, round elements, faces | A pin on a map, a round avatar |
How responsive mode works
Traditional <map> / <area> elements use fixed pixel coordinates, so the clickable spots drift when the image scales down. The “CSS (responsive)” output places areas with position: absolute and percentage values, so the clickable regions follow the image at any width. Choose CSS mode for mobile-friendly sites.
| Mode | Responsive | How it works | Best for |
|---|---|---|---|
| CSS mode | Yes | position: absolute + % | Mobile-friendly sites (recommended) |
| HTML Map mode | Fixed | <map><area> pixel coordinates | Fixed-width or legacy use |
Common mistakes
- Using HTML Map mode while the image is scaled with CSS, so clicks land in the wrong spot → use CSS mode.
- Forgetting to enter a URL, so the link does nothing → check the URL field of each area.
- Fixing the wrapper width on the output code → make the wrapper fluid with width: 100% + max-width.
- Leaving alt empty and hurting accessibility → set alt text for each area.
FAQ
What is an image map generator?
An image map generator is a free web tool that lets you visually draw clickable areas (links) on an image and exports the responsive HTML code automatically.
How do I make a responsive image map?
Traditional HTML <map> elements use fixed pixel coordinates and are not responsive. This tool outputs CSS-based code using position: absolute and percentage values, so the clickable areas follow the image as it scales down.
Which image formats are supported?
PNG, JPG, SVG, WebP and any other image format your browser can display.
What area shapes can I use?
Rectangle (rect) and circle. Draw them by dragging, and you can move or resize them after they are created.
Where do I paste the generated code?
Into an HTML file, a WordPress custom HTML block, or your article body. For CSS mode, copy the whole wrapper that surrounds the image.
Is sign-up or payment required?
No. It is free and needs no account, and the generated code can be used on commercial sites. Please check the copyright of the image itself yourself.