HTML Image Map Generator - Create Clickable Areas

Easily create HTML image maps by drawing clickable hotspots on your images. Define shapes, links, and alt text visually, then get the HTML code.

HTML Image Map Generator

Create clickable image maps with multiple link areas

Image URL

Width

Height

Add Clickable Area

Coordinates

Format: left,top,right,bottom

Link URL

Alt Text

Generated HTML

<img src="image.jpg" usemap="#imagemap" width="800" height="600" alt="Image Map">

<map name="imagemap">
</map>

Shape Examples

Rectangle: x1,y1,x2,y2
10,10,100,100

Circle: center_x,center_y,radius
50,50,30

Polygon: x1,y1,x2,y2,x3,y3,...
10,10,50,10,30,50

How the HTML Image Map Generator Works

This tool creates clickable image maps by defining multiple link areas on a single image. Choose from rectangle, circle, or polygon shapes and specify coordinates for each clickable region.

Image Map Creation Process

Enter the image URL and dimensions (width and height)
Select a shape type: rectangle, circle, or polygon
Enter coordinates for the clickable area based on the shape
Specify the link URL and alt text for accessibility
Click "Add Area" to define the clickable region
Repeat to add multiple clickable areas to the same image
Copy the generated HTML code with img and map elements

Specific Use Cases

Interactive Product Images

An e-commerce site displays a laptop image with clickable areas for different features. Clicking the screen links to display specs, the keyboard links to customization options, and the ports section links to connectivity information.

Website Navigation Maps

A designer creates an image-based navigation menu where different parts of a banner link to different sections. This was common before CSS-based navigation became standard.

Educational Diagrams

A teacher creates an interactive human body diagram where clicking on organs links to detailed information pages about each body system.

Real Estate Floor Plans

A real estate website makes floor plan images interactive. Clicking on rooms shows photos, dimensions, or feature details for that specific room.

Game Strategy Maps

A gaming site creates clickable world maps where different regions link to area-specific guides, quest information, or resource locations.

What to Know Before Using This Tool

Understanding image map coordinates and shapes:

Rectangle: requires 4 coordinates (x1,y1,x2,y2) - top-left and bottom-right corners
Circle: requires 3 coordinates (center_x,center_y,radius)
Polygon: requires 6+ coordinates (x1,y1,x2,y2,x3,y3...) - at least 3 points
Coordinates are in pixels relative to the top-left corner of the image
The usemap attribute links the img element to its map by name
Alt text is important for accessibility - screen readers use it to describe links

Frequently Asked Questions

How do I find coordinates for my image?

Use an image editor like Photoshop or GIMP to view cursor coordinates. Alternatively, use browser developer tools or online image map creators with visual point-and-click interfaces.

What's the difference between the shape types?

Rectangle creates box-shaped clickable areas. Circle creates circular areas from a center point. Polygon creates irregular shapes by connecting multiple points. Choose based on the area you want to highlight.

Are image maps still supported in modern browsers?

Yes, image maps are still supported in all major browsers. However, for new projects, consider CSS-based solutions or SVG with clickable elements for better accessibility and responsiveness.

Can overlapping areas work correctly?

When areas overlap, the first-defined area in the HTML takes priority. Order your areas strategically if they might overlap.

How do I make image maps responsive?

Traditional image maps don't scale well. For responsive designs, consider using SVG with clickable elements, or JavaScript libraries that scale coordinates proportionally with the image.

Why is alt text important for image maps?

Alt text provides accessibility for screen reader users who can't see the image. Each area should have descriptive alt text explaining what that clickable region does.

Other Free Tools

Search tools

HTML Image Map Generator - Create Clickable Areas