Upload Image
Click or drag & drop to upload
Supports JPG, PNG, GIF, WebP
Generated HTML
π‘ How to Use
1. Upload an image as your map background
2. Choose a shape (rectangle/circle/polygon), then click & drag on the image to create a hot area
3. Set the link URL and alt text for each area
4. Delete or modify existing areas as needed
5. Copy the complete HTML code with one click
β FAQ
What is an HTML Image Map?
An HTML Image Map allows you to define multiple clickable regions on a single image, each linking to a different URL. It's commonly used for navigation maps, product showcases, interactive infographics, and floor plans. It works using the <map> and <area> HTML tags.
Which shape should I use?
Rectangle (rect) is best for buttons, cards, and regular shapes. Circle (circle) works well for avatars, icons, and coordinate points. Polygon (poly) is ideal for irregular shapes like countries on a map, specific parts in a product image, or organic shapes.
Do coordinates break on different screen sizes?
Area coordinates are pixel values based on the original image dimensions. Since coordinates are relative to the image itself, they remain correct even when the image is scaled for display. Avoid using srcset or other methods that change the image's actual rendered size.