Image Map Generator

How to Use the Image Map Generator

1. Pick Rectangle, Circle or Polygon, or Select to move and reshape areas.
2. Draw on the image. Upload your own picture or drop it here first.
3. Type the link and alt text for each area in the list.
4. Set the image file name and a map name without spaces.
5. Copy the generated HTML, with the optional responsive script if needed.

1. Load your image. Press Upload image or drop a file on the canvas. The sample floor plan shows how a finished map looks. Your image never leaves your device, because it is opened locally by the browser.
2. Pick a shape and draw. Rectangle and Circle work by dragging. For Polygon, click each corner, then click the first point, double-click or press Enter to close the shape.
3. Fill in each area. Type the link and alt text in the list. Choose New tab if the link should open in a new browser tab.
4. Adjust. Switch to Select to drag areas around or reshape them with the white handles. Select an area and press Delete to remove it.
5. Copy the HTML and paste it where the image should appear. Upload the image itself next to the page, using the file name shown in the settings.

How HTML Image Map Code Works

An image map has two parts. The img element points to a map with the usemap attribute, and the map element holds one area element for each clickable region. The name on the map must match the text after the # in usemap.

All coordinates are measured in pixels from the top-left corner of the image at its natural size. The rules are set out in the WHATWG HTML Standard section on image maps.

Worked Example

The Produce rectangle starts 40 pixels from the left and 60 pixels from the top, and ends at 300 and 240. It is 300 − 40 = 260 pixels wide and 240 − 60 = 180 pixels tall. If the 800 pixel wide image is shown at 400 pixels on a phone, every coordinate must be multiplied by 400 ÷ 800 = 0.5, so the area becomes 20,30,150,120. That is exactly what the optional responsive script does.

Making an Image Map Responsive

Area coordinates are fixed pixel values. They do not shrink when CSS makes the image smaller, so on a narrow screen the clickable regions drift away from the picture. Tick the Responsive option and the generated code adds max-width:100%;height:auto to the image plus a short script. The script stores the original coordinates and scales them by the displayed width divided by the natural width whenever the window is resized.

Accessibility and SEO Tips

• Write alt text for every area that says where the link goes, such as Produce section, not Click here. Screen readers read area alt text as the link name.
• Give the image its own alt text that describes the whole picture.
• Offer a text alternative. For important navigation, repeat the links as a normal list near the image, so keyboard and mobile users have an easy route.
• Keep areas large enough to tap. A region smaller than about 44 by 44 CSS pixels is hard to hit on a touch screen.

Common Uses for Clickable Images

Image maps suit pictures where position carries meaning: store and campus floor plans, regional maps, product diagrams with labelled parts, team photos that link to profiles and infographics. For layouts made of plain boxes, ordinary links positioned with CSS are easier to maintain. Image maps work in every current browser and need no JavaScript unless you add the responsive script.

If you edit the picture later, keep its pixel size the same and the coordinates stay valid. If you crop or resize the file, load the new version here and draw the areas again, because every coordinate is tied to the original pixel grid.

Frequently asked questions