Image Map Generator
Draw rectangle, circle and polygon hotspots, give each one a link and alt text, and copy the <map> and <area> HTML with pixel-exact coordinates.
or browse filesdrop an image here or paste
Draw rectangle, circle and polygon hotspots, give each one a link and alt text, and copy the <map> and <area> HTML with pixel-exact coordinates.
or browse filesdrop an image here or paste
Drag on the image to draw a box.
An image map is one picture with several clickable regions in it, written as a <map> element and one <area> tag per region. This image map generator draws those regions for you and writes the code as you go.
All three <area> shapes are here, not just the easy one:
shape="rect" - drag a box, then drag any corner to resize it. Coords come out as left,top,right,bottom.shape="circle" - drag out from the centre. Coords come out as x,y,radius.shape="poly" - click each corner around whatever you are outlining, then click the first point again or press Enter to close it. Coords come out as the vertex list, x1,y1,x2,y2,....Nothing is drawn once and frozen. Every area stays editable: drag a whole shape to move it, drag a single vertex to reshape it, double-click an edge of a polygon to add a point there, right-click a point to take it out, and nudge the selected area or vertex one pixel at a time with the arrow keys (hold Shift for ten). The magnifier button zooms the pixels under your finger while you aim, which is the difference between a hotspot that lands on the button in the screenshot and one that lands next to it.
Each area gets its own href, alt text, optional title tooltip and an "open in a new tab" switch. The alt attribute matters more than most generators admit: on an <area> it is what a screen reader announces, and it is the one attribute the HTML specification actually requires when the area has an href. Cheap generators skip it. This one gives every area an alt field and always writes the attribute, even when you leave it empty, so the markup is valid either way.
<img> tag and the <map> block into your page.There is also a Paste map button. Paste an image map you wrote a year ago, press Load areas, and the hotspots appear on the picture, ready to drag. That is the workflow no other online image map creator offers, and it is the only sane way to fix a map when the picture behind it has been redesigned.
Two extra saves sit next to the copy button. One writes a working demo page: a single .html file with the picture inlined and the map wired up, so you get a live example you can open in a browser and click through before shipping. The other saves the picture with every area drawn on it as a PNG, which is what you hand to whoever has to maintain the map later.
People call this an image mapper, an image-map builder, image mapping software or just an imagemap editor. It is one job under a lot of names: pick the regions, get the coords, paste the HTML5 markup. This one is fast because it is a page, not a service - there is no upload, no queue and no round trip to anybody's server between drawing a shape and having the code.
Every number this tool writes is a pixel of the file you loaded, counted from the top-left corner, whatever size the preview happens to be drawn at on your screen. Load a 4000 x 3000 photo and the preview shrinks to fit your window, but the coords in the code are still out of 4000 and 3000. That is the only correct answer, because the browser resolves <area> coordinates against the image itself, not against your editing preview.
The live readout under the picture shows the cursor position in those same pixels while you move, and the i button opens the exact coords of whatever is selected so you can copy a single number set. If coordinates are all you came for and you do not need the markup, the image coordinates finder is the smaller tool for that job, and measure image will give you distances and angles between the same points.
Here is the thing every image map tutorial glosses over. <area coords> values are absolute pixels. Give the image width: 100% in your CSS, let it render at 640px instead of its natural 1200px, and every hotspot is now in the wrong place - roughly twice as far from the top-left as it should be. Browsers do not rescale image map coordinates for you, and HTML has no attribute that asks them to. This is the single most common complaint about image maps and it is why a lot of people give up on them.
Percentages are not the way out either. HTML 4 did allow a percentage in coords, but HTML5 dropped it and browser support was never dependable, so a percentage map is a map that works in some browsers and silently misfires in others.
So this generator gives you two outputs and tells you the truth about both:
<map> and <area> markup. Correct and dependency-free, as long as the image is displayed at its natural size. Set width and height on the <img> (this tool writes them for you) and do not scale it with CSS.data-coords attribute, measures the rendered size of the image against its naturalWidth, and rewrites the live coords on load and on every resize, through a ResizeObserver. No jQuery, no library, nothing to install. Circle radii scale by the smaller of the two factors so a circle never turns into an oval the browser cannot draw.If you need hotspots that scale and animate and take CSS, an absolutely positioned <a> per region over a container, or an inline SVG with <a> elements, will serve you better than an image map. Image maps are still the shortest path when you have one raster picture, a handful of regions, and no appetite for a layout system.
Image mapping earns its keep whenever the regions are irregular and the picture is the interface. Anatomy diagrams and biology charts, where every organ links to its own page. Floor plans and seating charts, where a room or a block is a polygon and nothing else. Geographic maps, where a country border is a polygon with thirty points and no rectangle will do. Product photos with several items in one shot. Team pages built from one group photograph. Old-school navigation banners built from a single graphic.
The pattern in every one of those: the shapes are not boxes. That is exactly why a rectangle-only image map creator is not enough, and why polygon support is the first thing to check in any image map maker.
The picture is read by your own browser through a FileReader and drawn on a canvas on your own machine. Nothing is transmitted, there is no account, there is no watermark, and there is no queue. For a developer that is not a nice-to-have: you are often mapping a client's unreleased artwork, an internal dashboard screenshot, or a document nobody outside the company should see, and pasting that into a random website's uploader is a decision somebody may ask you about later. Here there is nothing to ask about, because the file never left the tab. The page keeps working offline once it has loaded.
The tool is free, there is no limit on how many areas you draw, and the generated HTML has no attribution comment, no tracking pixel and no link back to us baked into it.
Add a usemap attribute to your img tag, then write a map element with a matching name and one area element inside it for every clickable region. Each area needs a shape (rect, circle or poly), a coords list in image pixels, an href and an alt. This generator writes all of that for you: draw the regions on the picture and copy the finished block.
Yes, all three shapes. Rectangle, circle and polygon are equal citizens here, and every one of them stays editable after you draw it. Most free online image map generators handle rectangles only, which is useless the moment you are outlining a country, a room on a floor plan or a person in a group photo.
rect takes four numbers, left,top,right,bottom. circle takes three, centre-x,centre-y,radius. poly takes an even list of x,y pairs, one pair per corner, at least three pairs. All of them count pixels from the top-left corner of the image at its natural size.
Because coords are absolute pixel numbers and browsers do not rescale them when CSS changes the size of the image. Switch the output here to Responsive and paste the small script that comes with it: it remembers the true coordinates and rewrites the live ones whenever the rendered size changes, so the map follows the picture. The alternative is to display the image at its natural size and leave the plain markup alone.
Yes. Press Paste map, paste the existing map block or just the area tags, and press Load areas. Every hotspot appears on the picture with its href, alt, title and target intact, ready to drag, reshape or delete. Copy the code back out when you are done. Round-tripping a map through this editor does not change a single coordinate.
Not into the file itself - a JPEG has no place to store a link. What you do instead is exactly this: keep the picture as it is, and put an image map over it in the page. Draw an area over the part that should be clickable, give it an href, and that region of the JPEG becomes a hyperlink when the page is displayed. The image on disk is untouched.
No. The file is opened by your browser and drawn on a canvas on your device. It is never sent anywhere, there is no signup, and the page runs offline once loaded.
Not for the plain output. A map element with area tags is pure HTML, understood by every browser since the 1990s, indexable by search engines and readable by screen readers. Only the optional responsive output adds a script, and that script only recalculates numbers.
Yes. The map and area elements are part of the current HTML living standard and every browser supports them, and imagemaps have been in HTML since the very first versions of it, including mobile ones, where a tap on an area behaves like a click. The two things to get right are an alt on every area for accessibility, and the coordinate scaling described above.
Any format your browser can display: JPG, PNG, WebP, GIF, AVIF, BMP. The map is written against the pixel size of whatever you load, so if you plan to resize the image or crop it first, do that before building the map, not after.