HTML Image Maps

Subject: html

HTML Image Maps

Image Maps allow users to click on different parts of a single image and navigate to different destinations. This is achieved using the <map> and <area> tags in conjunction with the <img> tag.

🔗 Basic Concept

You define an image with the usemap attribute and create clickable regions using the <area> tag inside a <map>.

Syntax:

🚀 Try it in Compiler

🧭 Shape Attribute Values

  • rect: Rectangle (coords = x1, y1, x2, y2)
  • circle: Circle (coords = centerX, centerY, radius)
  • poly: Polygon (list of x,y pairs)
  • default: Covers entire image

✅ Example

🚀 Try it in Compiler

🎨 Styling Image Maps

Image maps themselves cannot be styled directly with CSS. However:

  • You can style the <img> element (borders, responsiveness, etc.)
  • You can enhance <area> elements using JavaScript (e.g., highlight effects on hover)

💡 Use Cases for Image Maps

  • Interactive geographic maps (clickable countries or states)
  • Product feature diagrams (clickable parts of a product)
  • Real estate floor plans (click on rooms)
  • Infographics with multiple links

📌 Key Takeaways

  • Use <img usemap="#mapname"> to associate an image with a map
  • Define clickable zones using <area> inside <map name="mapname">
  • Use shape and coords to define the type and position of clickable regions
  • Add alt text for accessibility
  • You can’t style <area> tags with CSS, but interactivity can be added via JavaScript

🏷️ Tags Reference

  • <img>: The image being mapped
  • usemap: Links the image to a named <map>
  • <map>: Container for <area> tags
  • <area>: Defines a clickable area (shape, coords, link, alt)
Next: HTML Picture Element