Images & Graphics

Image Maps & Clickable Areas

Create interactive images with multiple clickable regions. Learn to define custom shapes and create accessible, responsive image maps with HTML.

What are Image Maps?

Image maps allow you to define clickable regions (hotspots) within a single image, where each region can link to different destinations.

Common Use Cases:

Interactive infographics
Clickable floor plans or building layouts
Geographic maps with clickable regions
Product diagrams with part identification
Anatomical charts
Navigation menus with custom shapes

Basic Image Map Structure

HTML
<!-- 1. Create the image with usemap attribute --&gt;
<img src="world-map.jpg" 
     alt="World map" 
     usemap="#worldmap"
     width="800" 
     height="600">

<!-- 2. Define the map with matching name --&gt;
<map name="worldmap">
    <!-- 3. Define clickable areas --&gt;
    <area shape="rect" 
          coords="0,0,200,300" 
          href="/north-america" 
          alt="North America">
    
    <area shape="circle" 
          coords="400,300,100" 
          href="/europe" 
          alt="Europe">
    
    <area shape="poly" 
          coords="200,400,300,500,250,550,150,500" 
          href="/south-america" 
          alt="South America">
</map>

Key Components:

usemap="#name" - Links image to map
<map name="name"> - Defines the map
<area> - Defines each clickable region

Area Shapes

1. Rectangle (rect)

HTML
<area shape="rect" 
      coords="x1,y1,x2,y2" 
      href="link.html" 
      alt="Description">

<!-- coords format: left, top, right, bottom --&gt;
<!-- Example: Button from (10,10) to (110,50) --&gt;
<area shape="rect" 
      coords="10,10,110,50" 
      href="/button-action" 
      alt="Click here button">

2. Circle (circle)

HTML
<area shape="circle" 
      coords="x,y,radius" 
      href="link.html" 
      alt="Description">

<!-- coords format: center-x, center-y, radius --&gt;
<!-- Example: Circle at (150,150) with radius 50 --&gt;
<area shape="circle" 
      coords="150,150,50" 
      href="/circular-region" 
      alt="Circular button">

3. Polygon (poly)

HTML
<area shape="poly" 
      coords="x1,y1,x2,y2,x3,y3,..." 
      href="link.html" 
      alt="Description">

<!-- coords format: pairs of x,y coordinates --&gt;
<!-- Each pair is a vertex of the polygon --&gt;
<!-- Automatically closes from last to first point --&gt;

<!-- Example: Triangle --&gt;
<area shape="poly" 
      coords="100,50,150,150,50,150" 
      href="/triangle" 
      alt="Triangle region">

<!-- Example: Irregular shape (5 points) --&gt;
<area shape="poly" 
      coords="50,10,90,30,80,70,20,70,10,30" 
      href="/custom-shape" 
      alt="Custom region">

4. Default (default)

HTML
<area shape="default" 
      href="default-link.html" 
      alt="Default region">

<!-- Covers entire image except defined areas --&gt;
<!-- Use as fallback/catch-all region --&gt;
<!-- Should be last area in map --&gt;

Complete Example: Interactive Product Diagram

Laptop Diagram with Clickable Parts
HTML
<img src="laptop-diagram.jpg" 
     alt="Laptop parts diagram" 
     usemap="#laptop-parts"
     width="800" 
     height="600">

<map name="laptop-parts">
    <!-- Screen (rectangle) --&gt;
    <area shape="rect" 
          coords="200,50,600,350" 
          href="/parts/screen" 
          alt="Screen - 15.6 inch display"
          title="Click for screen details">
    
    <!-- Keyboard (rectangle) --&gt;
    <area shape="rect" 
          coords="200,400,600,550" 
          href="/parts/keyboard" 
          alt="Keyboard"
          title="Click for keyboard details">
    
    <!-- Trackpad (rectangle) --&gt;
    <area shape="rect" 
          coords="350,560,450,590" 
          href="/parts/trackpad" 
          alt="Trackpad"
          title="Click for trackpad details">
    
    <!-- Power button (circle) --&gt;
    <area shape="circle" 
          coords="50,100,20" 
          href="/parts/power-button" 
          alt="Power button"
          title="Power button information">
    
    <!-- USB port (small rectangle) --&gt;
    <area shape="rect" 
          coords="650,400,680,420" 
          href="/parts/usb-port" 
          alt="USB port"
          title="USB-C port information">
</map>

Accessibility

Image maps must be accessible to screen readers and keyboard users.

Accessible Image Map
HTML
<img src="navigation-map.jpg" 
     alt="Site navigation map" 
     usemap="#site-nav"
     width="1000" 
     height="400">

<map name="site-nav">
    <!-- ALWAYS include alt text for each area --&gt;
    <area shape="rect" 
          coords="0,0,250,400" 
          href="/products" 
          alt="Products section">
    
    <area shape="rect" 
          coords="250,0,500,400" 
          href="/services" 
          alt="Services section">
    
    <area shape="rect" 
          coords="500,0,750,400" 
          href="/about" 
          alt="About us section">
    
    <area shape="rect" 
          coords="750,0,1000,400" 
          href="/contact" 
          alt="Contact us section">
</map>

<!-- Best practices: --&gt;
<!-- âœ… Include alt on main image --&gt;
<!-- âœ… Include alt on each area --&gt;
<!-- âœ… Areas are keyboard-accessible (native behavior) --&gt;
<!-- âœ… Consider adding title for hover tooltips --&gt;

Responsive Image Maps

Traditional image maps use fixed pixel coordinates, which break on different screen sizes. Solutions include JavaScript libraries or CSS-based alternatives.

Problem:

HTML
<!-- Fixed coordinates don't scale! --&gt;
<img src="map.jpg" 
     alt="Map" 
     usemap="#mymap"
     style="width: 100%">  <!-- Image scales --&gt;

<map name="mymap">
    <area coords="100,100,200,200" ... />  <!-- Coords don't! --&gt;
</map>

Solution 1: JavaScript Library

HTML
<!-- Use ImageMapResizer library --&gt;
<script src="imageMapResizer.min.js"></script>

<img src="map.jpg" 
     alt="Map" 
     usemap="#mymap"
     style="width: 100%">

<map name="mymap">
    <area shape="rect" coords="100,100,200,200" href="..." alt="...">
</map>

<script>
    imageMapResize(); // Auto-scales coordinates
</script>

Solution 2: SVG Alternative

HTML
<!-- SVG scales naturally --&gt;
<svg viewBox="0 0 800 600" style="width: 100%;">
    <image href="map.jpg" width="800" height="600" />
    
    <!-- Clickable regions --&gt;
    <a href="/region-1">
        <rect x="100" y="100" width="100" height="100" 
              fill="transparent" />
        <title>Region 1</title>
    </a>
    
    <a href="/region-2">
        <circle cx="400" cy="300" r="50" 
                fill="transparent" />
        <title>Region 2</title>
    </a>
</svg>

Creating Image Maps

Manual Method:

Open image in image editor
Note pixel coordinates of regions
Write HTML with those coordinates

Tools (Easier!):

Image Map Generator: image-map.net
Mapedit: Desktop application
Photoshop/GIMP: Can export image maps
Online tools: Draw shapes, get HTML code

Typical Tool Workflow:

Upload your image
Draw shapes on clickable regions
Add URLs and alt text
Tool generates HTML code
Copy/paste into your page

Advanced Techniques

1. Overlapping Areas

HTML
<map name="overlap">
    <!-- First area in code has priority --&gt;
    <area shape="circle" coords="150,150,50" href="/circle" alt="Circle">
    <area shape="rect" coords="100,100,200,200" href="/rect" alt="Rectangle">
    
    <!-- Where they overlap, circle link takes precedence --&gt;
</map>

2. JavaScript Enhancement

HTML
<img src="map.jpg" alt="Interactive map" usemap="#mymap" id="my-image">

<map name="mymap">
    <area id="region-1" shape="rect" coords="0,0,200,200" 
          href="/region-1" alt="Region 1">
    <area id="region-2" shape="rect" coords="200,0,400,200" 
          href="/region-2" alt="Region 2">
</map>

<script>
// Add hover effects
document.querySelectorAll('area').forEach(area => {
    area.addEventListener('mouseenter', (e) => {
        console.log('Hovered:', e.target.alt);
        // Could highlight region, show tooltip, etc.
    });
    
    area.addEventListener('click', (e) => {
        if (someCondition) {
            e.preventDefault(); // Prevent navigation if needed
            // Handle click with JavaScript instead
        }
    });
});
</script>

3. Target Attribute

HTML
<map name="mymap">
    <!-- Open in new tab --&gt;
    <area shape="rect" 
          coords="0,0,100,100" 
          href="https://external-site.com" 
          target="_blank"
          rel="noopener noreferrer"
          alt="External link">
    
    <!-- Open in iframe --&gt;
    <area shape="rect" 
          coords="100,0,200,100" 
          href="/content.html" 
          target="content-frame"
          alt="Load in iframe">
</map>

<iframe name="content-frame" width="800" height="600"></iframe>

Best Practices

âœ… Do

Always include alt text on image and all areas
Specify width and height on image
Use descriptive alt text for each region
Test keyboard navigation (Tab key)
Consider mobile responsiveness
Add title attributes for hover tooltips
Use image map tools (don't calculate manually)
Provide text alternative for critical navigation

âŒ Don't

Forget alt text (inaccessible)
Use for essential navigation only
Create tiny clickable areas (< 44Ã—44px)
Rely on image maps for mobile sites
Use without fallback on mobile
Make coordinates calculation errors
Forget to test with keyboard
Use for complex interactions (use JavaScript)

Modern Alternatives

Consider these alternatives for modern web development:

1. CSS + Absolute Positioning

HTML
<div class="interactive-image">
    <img src="diagram.jpg" alt="Diagram">
    <a href="/part-1" class="hotspot" style="top: 10%; left: 10%; width: 20%; height: 15%;">
        <span class="sr-only">Part 1</span>
    </a>
    <a href="/part-2" class="hotspot" style="top: 30%; left: 40%; width: 15%; height: 20%;">
        <span class="sr-only">Part 2</span>
    </a>
</div>

<style>
.interactive-image {
    position: relative;
    display: inline-block;
}
.hotspot {
    position: absolute;
    display: block;
    border: 2px dashed transparent;
}
.hotspot:hover,
.hotspot:focus {
    border-color: blue;
    background: rgba(0,0,255,0.1);
}
</style>

2. SVG (Best for Scalability)

Use inline SVG with clickable shapes (shown earlier)

3. Canvas + JavaScript

For complex interactive graphics with animations

4. CSS Grid/Flexbox

For rectangular regions, use CSS grid overlay

When to Use Image Maps

âœ… Good Use Cases:

Desktop-only applications
Simple clickable regions
Static content
Quick prototypes
Legacy browser support needed

âŒ Avoid For:

Mobile-responsive sites
Complex interactions
Dynamic content
Hover effects/animations
Primary navigation

What's Next?

Explore SVG graphics for scalable, interactive vector images.

Next: SVG Graphics â†’