Turn any picture into a clickable image map. Draw rectangles, circles and polygons over the parts you want to link, add a URL and alt text to each hotspot, and copy classic <map> HTML, a responsive version with a tiny script, or a modern SVG image map.
Last updated:
Hotspots 0
No hotspots yet. Pick a tool and draw on the image.
Import an existing <map>
Advertisement
Advertisement
How to use the HTML Image Map Generator
Choose or drop an image and type the path it will have on your site (for example images/floor-plan.jpg).
Pick a tool: Rectangle and Circle work by dragging; Polygon adds a point per click and finishes when you click the first point, double-click or press Enter.
Fill in each hotspot in the list: link URL, alt text and an optional tooltip, and choose whether it opens in a new tab.
Adjust with the Select tool: drag shapes to move them and drag the square handles to resize or reshape.
Copy the code in the format you need, or download a demo page and put your image next to it.
Image map shapes and coordinates
shape
coords format
Example
Typical use
rect
left, top, right, bottom
60,60,320,240
Buttons, buildings, rooms on a floor plan
circle
center x, center y, radius
610,160,105
Pins, round icons, planets, wheels
poly
x1,y1, x2,y2, … (3 or more corners)
470,395,560,370,700,410
Countries, states, irregular objects
default
no coords
<area shape="default" href="/">
Fallback link for the rest of the image (add by hand)
When areas overlap, the browser uses the first matching <area> in the map, so put small shapes before large ones. The hotspot numbers in the editor show that order.
The value of usemap is the map's name with a leading #. Setting width and height to the image's real size keeps the coordinates correct and prevents layout shift.
Tips
Draw at the image's final size: if you later crop or resize the picture, the coordinates must be redone or scaled.
Make hotspots at least about 44 × 44 CSS pixels so they are easy to tap on phones.
Give users a visual hint that the image is clickable, such as labels or a short caption, because map areas are invisible by default.
Keep the list of links available as normal text too, for search engines and assistive technology.
Frequently asked questions
What is an HTML image map?
An image map lets different regions of one image link to different pages. The <img> tag gets a usemap attribute that points to a <map> element, and each <area> inside the map defines a clickable shape with its own href, alt text and coordinates.
How do area coordinates work?
Coordinates are in pixels of the original image, measured from its top-left corner. A rectangle uses x1,y1,x2,y2 (two opposite corners), a circle uses x,y,radius, and a polygon lists every corner as x1,y1,x2,y2,x3,y3 and so on.
Why does my image map stop working when the image is resized?
Area coordinates are fixed pixel values, so when CSS scales the image (for example max-width: 100%) the clickable regions no longer line up. Use the Responsive output, which recalculates the coordinates whenever the image size changes, or the SVG version, which scales naturally.
Should I use the classic map or the SVG version?
The classic map has worked in every browser for decades and is simple to paste. The SVG version scales without JavaScript, can show hover highlights with CSS and makes each hotspot a normal focusable link, which is nicer for keyboard users. Both are fine for most sites.
Are image maps accessible?
They can be. Give every area meaningful alt text describing where the link goes, give the image itself an alt text, and make sure important links are also available as normal text links somewhere on the page, because small hotspots can be hard to hit on touch screens.
Is my image uploaded to a server?
No. The image is opened locally with your browser and only displayed on this page. Only the code you copy contains the file name you typed, not the image itself.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.