You have a map, a diagram or an infographic and need different zones of that same image to lead to different links: each country on a map to its corresponding page, each room in a floor plan to its description. The HTML <map> tag with clickable areas (usemap) has solved this since the web's early years, but calculating each zone's exact coordinates by hand, with pencil and calculator over an image, is a method nobody should still be using in 2026.
What an image map is, in short
An image map is an HTML image over which invisible clickable zones are defined, each with its own shape (rectangle, circle or polygon) and its own link destination. Unlike slicing the image into several separate images (a clunkier solution with worse performance), an image map uses a single image with each zone's coordinates defined in the HTML.
The three available zone shapes
- Rectangle (rect): defined by two corner coordinates, the simplest and most common shape for rectangular zones like buttons or square sections of an image.
- Circle: defined by a center and a radius, ideal for circular zones like icons or points of interest on a map.
- Polygon (poly): defined by a series of points forming an irregular outline, needed for non-geometric shaped zones, like a country's actual outline on a map.
How to create an image map visually
- Upload the image you want to define zones on.
- Draw each zone directly on the image, choosing the corresponding shape (rectangle, circle or polygon).
- Assign a link to each zone.
- Adjust with precision using zoom and snap to grid if you need to align zones exactly.
- Export the result as HTML code or as JSON.
You can do it free with the image map generator on this site.
Why drawing visually is so much better than writing coordinates by hand
An image map's coordinates (for example, coords="34,44,270,350" for a rectangle) don't mean anything intuitive just looking at them: you have to calculate exactly where those pixels fall on the actual image, and an error of a few pixels leaves the clickable zone misaligned with the visual element it represents. Drawing the zone directly on the image, seeing the result in real time, completely eliminates that manual calculation and verification process.
Why undo/redo and snap to grid matter more than they seem
Defining complex zones (especially polygons with many points) almost always involves adjustments and corrections on the fly. Being able to undo a misplaced point without having to redo the entire zone from scratch, and being able to automatically snap points to a grid when geometric precision is needed, are the practical differences between a comfortable tool and a frustrating one.
Real use cases
- Interactive maps: each region or country leads to specific content.
- Building or event floor plans: each room or booth leads to its corresponding information.
- Infographics with multiple points of interest: each visual element of the infographic links to a source or expanded detail.
- Technical diagrams: each component of a diagram leads to its specific documentation.
Frequently asked questions
What formats can I export the result in? HTML (ready to insert with the <map> tag) or JSON (to process with your own code).
Can I edit a zone after creating it? Yes, with undo/redo you can fix mistakes without redoing the whole zone.
Does it work well on screens of different sizes (responsive)? The image map is based on fixed coordinates over the original image; for fully responsive designs, it's worth checking how the image behaves across different screen sizes.
Is my image uploaded to any server? No, the entire process happens in your browser.
Create clickable zones on any image for free with the image map generator, with rectangles, circles, polygons and export to HTML or JSON.