An image map turns parts of one picture into separate links. Load an image, drag to draw rectangles or circles, click points for polygons, and type a link and alt text for each area. Copy the classic map and area HTML, or a responsive SVG version whose areas shrink with the image on phones.
| shape | coords | Meaning |
|---|---|---|
| rect | x1,y1,x2,y2 | Top left and bottom right corners |
| circle | x,y,r | Centre and radius |
| poly | x1,y1,x2,y2,... | Each corner in order; the shape closes itself |
| default | (none) | Everything not covered by another area |
Updated
Floor plans, product diagrams, team photos and maps often need several links inside one picture. Drawing the areas by eye is far quicker than measuring pixels, and your image never leaves your computer: it is read in the browser and only its size is used in the code.
Draw rectangles, circles and polygons on the sample floor plan or your own image, then set a link and alt text for each area.
These are the two outputs the generator writes for the four sample areas.
Works everywhere at the image's natural size of 600 by 360 pixels.
<img src="floor-plan.png" width="600" height="360" usemap="#floor-plan" alt="Shop floor plan" />
<map name="floor-plan">
<area shape="rect" coords="20,20,280,170" href="/showroom" alt="Showroom" />
<area shape="rect" coords="300,20,580,170" href="/workshop" alt="Workshop" />
<area shape="circle" coords="150,265,70" href="/cafe" alt="Cafe" />
<area shape="poly" coords="300,190,580,190,580,340,400,340" href="/garden" alt="Garden" />
</map>The viewBox matches the image size, so every link shape scales with the picture.
<svg viewBox="0 0 600 360" role="img" aria-label="Shop floor plan" style="width:100%;height:auto;display:block">
<image href="floor-plan.png" width="600" height="360" />
<g fill="transparent">
<a href="/showroom" aria-label="Showroom"><rect x="20" y="20" width="260" height="150" /></a>
<a href="/workshop" aria-label="Workshop"><rect x="300" y="20" width="280" height="150" /></a>
<a href="/cafe" aria-label="Cafe"><circle cx="150" cy="265" r="70" /></a>
<a href="/garden" aria-label="Garden"><polygon points="300,190 580,190 580,340 400,340" /></a>
</g>
</svg>The map and area pair has worked in browsers for decades and keeps the image as a normal img, which is simple for content tools. Its weakness is fixed coordinates.
The SVG version draws the image inside an svg element and wraps each shape in a link. Because everything shares one viewBox, the areas scale perfectly, and you can add a hover outline with CSS on the shapes.
Give the image itself alt text describing the whole picture, and each area alt text naming its destination. Keyboard users can tab through areas in source order, so list them in a sensible reading order.
Test by tabbing through the result. If the focus order jumps around the picture, reorder the rows in the list before copying.
Give the map a name, then set usemap on the img to the same name with a # in front, for example usemap="#site-map" and map name="site-map". The generator writes both for you.
Not on their own. Coordinates are numbers of CSS pixels, so they do not follow an image that CSS resizes. The SVG output solves this with a viewBox, which scales the picture and the link shapes together.
No. The file is opened with a local object URL so the browser can show it and read its width and height. Nothing is sent to We.Inc or anyone else.
They can. Where two areas overlap, the one listed first in the map wins the click, so put smaller areas before larger ones that surround them.
Related: HTML images guide, Image cropper, Placeholder image generator, Embed a Google Map, HTML embed code generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.