Image maps, drawn to the pixel.
Let the magic wand find the edges, draw the rest yourself, and copy the code as HTML, responsive HTML or SVG. Free, no sign-up. Your image is never uploaded, and your work is saved as you go.
Everything happens in your browser. Nothing is uploaded.
How it works
Add an image
Drag it in, open it, paste it or load it from an address.
Draw the areas
Rectangles, circles and polygons. The magic wand finds the edges for you.
Get the code
Copy it or download it as HTML, SVG, JSON, XML or CSV.
What the editor does
Magic wand and Find all
Click inside an area and the edge is traced by color. Click one plot on a site plan and get a suggestion for every plot like it.
Zoom to 3,200%, with a loupe and snapping
Put each point on the right pixel. Snap to points and edges, or turn on a grid.
Bring the map you already have
Paste an existing <map>, or open SVG, JSON, XML or CSV. If the image changed size, the coordinates are scaled to match.
Seven export formats
A classic HTML image map, responsive HTML with a tiny script, an SVG overlay that scales by itself, SVG, JSON, XML and CSV.
Saved as you work
The image and the areas stay in your browser. Close the tab and pick up where you left off.
Three shapes
Rectangles, circles and polygons. Drag points, add a point on an edge, duplicate, undo.
Examples to try
Open one in the editor and see how it works.
Your image never leaves your computer.
Everything happens in your browser. Nothing is uploaded, there is no sign-up and there are no cookies. Your work is saved in this browser until you clear the site data, so you can close the tab and pick up where you left off.
Visits are counted with Pirsch, which doesn't use cookies either. We also count a few actions, such as which format you export to, but never file names, images or anything you type.
Questions and answers
What makes imagemap.app different?
It is the only free image map generator we know of that finds the edges by itself. Click inside an area, and the magic wand traces it by color. Find all suggests every similar area in the image. You can also zoom to 3,200% with a loupe and snapping, and read in an image map you already have, also from SVG. Your image is never uploaded, and your work is saved as you go.
What is an image map?
An image with clickable areas. Each area is an <area> element inside a <map>, with a shape, coordinates and a link. Every browser supports it, so it works without extra code.
Is it really free?
Yes. No account and no watermark. The HTML and SVG you export include a short comment that credits imagemap.app, which you can delete.
Is my image uploaded anywhere?
No. The image is opened in your browser and stays there. If you load it from an address, your browser fetches it straight from the site that hosts it.
How do I make a responsive image map?
Plain image maps use fixed pixel coordinates, so the areas drift when the image is scaled. Choose the responsive export, where a small script scales the coordinates, or the SVG overlay, which scales by itself.
Which formats can I export?
Classic HTML with <img> and <map>, responsive HTML with a small script, HTML with an SVG overlay, SVG, JSON, XML and CSV. Copy the code or download it as a file.
Can I edit an image map I already have?
Yes. Choose Import and paste the HTML, or open the file. The editor also reads SVG, JSON, XML and CSV. If the map was made for another image size, the coordinates are scaled.
How do I use it in WordPress or another CMS?
Upload the image to your site first and copy its address. Enter that address in the Image address field when you export the HTML, and paste the code where your site accepts HTML, such as a Custom HTML block in WordPress. Some CMSs remove <script> from pasted code. If the responsive version stops scaling, use the SVG overlay, which needs no script.
Are image maps accessible?
They can be. Give every area an alt text that says where the link goes, and give the image its own alt text. The editor has a field for both. Screen readers read each area as a link, using its alt text.
How does the magic wand work?
Click inside an area, and the editor follows the edge by color and makes a polygon. Adjust tolerance and simplification with the sliders until it fits, then edit the points like any other polygon. Find all does the same for every similar area in the image. If dark lines separate the areas, turn on Lines separate the areas. It all runs in your browser.
Where is my work saved?
In this browser, on your computer. The image and the areas are saved as you work, so they are there the next time you open imagemap.app in the same browser. Another browser or computer won't see them, and clearing the site data deletes them. Export the JSON if you want a copy.
Why won't my image load from a URL?
The site that has the image must allow other sites to fetch it (CORS), and many don't. Download the image and open it as a file instead.
How do I get help?
Send an email to support@nextpage.no with imagemap.app in the subject. Tell us what you did and which browser you use.