Dibya Web

HTML Image Maps Explained: Shapes, Code & Uses

Learn HTML Image Maps with examples, shapes, coordinates, responsive tips, SEO benefits, accessibility best practices in this complete guide.

HTML Image Maps: A Complete and Easy Guide

HTML Image Maps are a classic yet powerful feature of web design. They allow you to make different parts of a single image clickable, with each area linking to a different page or action. Instead of using multiple images or buttons, you can use one image and define specific clickable regions within it.

Image maps are useful in navigation menus, infographics, educational diagrams, geographical maps, and interactive design layouts.

What Is an HTML Image Map?

An HTML image map is an image with defined clickable areas called hotspots. Each hotspot can link to a different URL, section, or script.

For example:

  • Clicking on a country in a world map takes you to that country’s page.
  • Clicking on parts of a human body diagram shows information about each organ.
  • Clicking different rooms in a house image leads to separate pages.

This is achieved using:

  • <img> tag
  • <map> tag
  • <area> tag

Basic Structure of HTML Image Maps

Here is the basic syntax:

<img src="image.jpg" usemap="#examplemap" alt="Example Image">

<map name="examplemap">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Rectangle Area">
  <area shape="circle" coords="337,300,44" href="page2.html" alt="Circle Area">
  <area shape="poly" coords="140,121,181,116,204,160,156,199" href="page3.html" alt="Polygon Area">
</map>

How It Works

  • <img> → Displays the image.
  • usemap="#examplemap" → Connects image to the map.
  • <map name="examplemap"> → Defines the image map.
  • <area> → Defines clickable regions.

Types of Shapes in Image Maps

There are three main shapes supported:

1. Rectangle (rect)

Defined by four coordinates:
x1, y1, x2, y2

2. Circle (circle)

Defined by:
center-x, center-y, radius

3. Polygon (poly)

Defined by multiple coordinate pairs:
x1,y1,x2,y2,x3,y3,...

Visual Example of Image Map Concept

Imagine a laptop image where different parts are clickable.

In such an example:

  • Clicking the screen shows display specifications.
  • Clicking the keyboard shows typing features.
  • Clicking the touchpad shows gesture options.

Real-World Use Cases

1. Website Navigation

Before modern CSS layouts, image maps were often used for navigation bars.

2. Educational Websites

Interactive biology diagrams and geographical maps.

3. Product Highlighting

E-commerce websites highlight product features within a single image.

4. Interactive Infographics

Clickable data visualization elements.

Advantages of HTML Image Maps

  • Reduces multiple image loading
  • Simple implementation
  • Works without JavaScript
  • Lightweight and fast
  • Ideal for static interactive diagrams

Limitations of HTML Image Maps

  • Not responsive by default
  • Coordinates break when image size changes
  • Difficult to maintain for complex layouts
  • Accessibility issues if not properly labeled
  • Outdated compared to modern UI techniques

Making Image Maps Responsive

Traditional image maps are not responsive. However, you can:

  1. Use JavaScript libraries like:
    • imageMapResizer.js
  2. Use CSS scaling techniques
  3. Calculate percentage-based coordinates
  4. Use SVG instead of traditional image maps

Accessibility in Image Maps

To improve accessibility:

  • Always include alt attribute in <area>
  • Add aria-label
  • Ensure keyboard navigation support
  • Provide text alternatives

Example:

<area shape="rect" coords="34,44,270,350"
      href="page1.html"
      alt="Product Details"
      aria-label="View Product Details">

Image Maps vs SVG

FeatureImage MapsSVG
Ease of UseEasyModerate
ResponsivenessLimitedExcellent
StylingMinimalAdvanced
AnimationNoYes
AccessibilityBasicStrong

Modern websites often prefer SVG for interactive graphics.

Common Mistakes to Avoid

  • Forgetting # in usemap
  • Mismatched map name
  • Incorrect coordinate values
  • Not testing on mobile devices
  • Missing alt attributes

How to Find Coordinates Easily

You can use:

  • Online Image Map Generators
  • Browser Developer Tools
  • Graphic editing software

Popular tools include:

  • Image-Maps.com
  • GIMP coordinate tools
  • Photoshop ruler tool

SEO Considerations

Search engines:

  • Read <area> links
  • Follow href URLs
  • Index linked pages

To improve SEO:

  • Use descriptive alt text
  • Use meaningful URLs
  • Add surrounding contextual content
  • Avoid using image maps for primary navigation only

When Should You Use HTML Image Maps?

Use them when:

  • You need simple clickable regions
  • The layout is fixed size
  • You want minimal scripting
  • The interaction is basic

Avoid them when:

  • You need responsive design
  • You require animations
  • You want dynamic interactions

Advanced Example with Target and Title

<area shape="circle"
      coords="200,150,50"
      href="contact.html"
      alt="Contact Us"
      title="Click to Contact"
      target="_blank">

This opens link in new tab and shows tooltip on hover.

Future of Image Maps

HTML image maps are part of the original HTML specification and still supported in HTML5. However, modern web development often favors:

  • SVG
  • CSS-based overlays
  • JavaScript-based interactive UI

Still, image maps remain useful for simple static use cases.

Conclusion

HTML Image Maps allow you to create interactive images by defining clickable areas within a single image. Though they are older technology, they are still supported and useful for specific applications.

They are simple, lightweight, and effective when used correctly. However, for responsive and modern designs, SVG and advanced UI techniques are often better choices.

Understanding image maps helps you appreciate early web design techniques and gives you another tool in your web development toolkit.

FAQ Section

1. What is an HTML image map?

An HTML image map is an image that contains multiple clickable areas. Each area can link to a different page or perform a different action using the <map> and <area> tags.

2. Which tags are used to create image maps in HTML?

Three main tags are used:

  • <img> (with usemap attribute)
  • <map>
  • <area>

3. What shapes are supported in HTML image maps?

HTML image maps support three shapes:

  • Rectangle (rect)
  • Circle (circle)
  • Polygon (poly)

4. Are HTML image maps responsive?

By default, image maps are not responsive. However, they can be made responsive using JavaScript libraries or percentage-based coordinate calculations.

5. Are HTML image maps good for SEO?

Yes. Search engines can crawl links inside <area> tags. Adding descriptive alt text and proper contextual content improves SEO.

6. What is the difference between image maps and SVG?

Image maps use coordinates over a static image, while SVG allows scalable, responsive, and animated graphics with better styling control.