Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Image maps allow you to define multiple clickable areas (hot spots) on a single image. Each area can link to a different URL or trigger different actions. Perfect for interactive diagrams, infographics, and visual navigation.
Regular <img> tag with usemap attribute
<img
usemap="#name"
/>Container with unique name attribute
<map
name="map-id"
></map>Clickable regions with shape and coords
<area
shape="rect"
coords="x,y..."
/>Rectangular clickable area. Perfect for product features or document regions.
<area shape="rect"
coords="100,50,400,200"
href="page"/>coords: x1, y1 (top-left), x2, y2 (bottom-right)
Circular clickable area. Great for planet maps or round elements.
<area shape="circle"
coords="300,200,50"
href="page"/>coords: centerX, centerY, radius
Multi-sided shape using multiple points. Perfect for irregular shapes.
<area shape="poly"
coords="x1,y1,x2,y2,x3,y3..."
href="page"/>coords: List of x,y pairs for each vertex
Fallback area for unmapped regions. Catch-all clickable area.
<area shape="default"
href="page" alt="Other"/>No coords needed - applies to unmatched clicks
Use browser DevTools or online image map generators:
Destination URL when area is clicked
<area href="/page">Alternative text for accessibility
<area alt="North America">Tooltip text on hover
<area title="Click for details">How to open the link
<area target="_blank">Download file instead of navigate
<area download>Relationship to target
<area rel="external">Try clicking on different areas of the images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Maps Demo</title>
</head>
<body>
<h2>Interactive Image Maps Demo</h2>
<div class="container">
<div class="section">
<h3>🌍 Interactive Solar System</h3>
<img
src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cdefs%3E%3CradialGradient id='space' cx='50%25' cy='50%25' r='70%25'%3E%3Cstop offset='0%25' stop-color='%230b1220'/%3E%3Cstop offset='100%25' stop-color='%23020617'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='600' height='400' fill='url(%23space)'/%3E%3Ccircle cx='300' cy='200' r='60' fill='%23facc15'/%3E%3Ccircle cx='370' cy='200' r='14' fill='%23f97316'/%3E%3Ccircle cx='430' cy='200' r='18' fill='%233b82f6'/%3E%3Ccircle cx='490' cy='200' r='16' fill='%2322c55e'/%3E%3Cg stroke='%2394a3b8' stroke-width='1' fill='none'%3E%3Ccircle cx='300' cy='200' r='110'/%3E%3Ccircle cx='300' cy='200' r='150'/%3E%3Ccircle cx='300' cy='200' r='190'/%3E%3C/g%3E%3C/svg%3E"
usemap="#solar-system"
alt="Click on planets to learn more"
class="map-img"
/>
<map name="solar-system">
<area shape="circle" coords="300,200,50" onclick="alert('☀️ The Sun - Our Star'); return false;" alt="Sun" title="Click to learn about the Sun"/>
<area shape="circle" coords="370,200,15" onclick="alert('🔴 Mercury - Closest planet to the Sun and smallest'); return false;" alt="Mercury" title="Mercury - Closest to Sun"/>
<area shape="circle" coords="430,200,20" onclick="alert('🟡 Venus - The hottest planet in our solar system'); return false;" alt="Venus" title="Venus - Morning Star"/>
<area shape="circle" coords="490,200,18" onclick="alert('🌍 Earth - Our home planet with life'); return false;" alt="Earth" title="Earth - Our Home"/>
</map>
<p class="info">✅ Click on the Sun and planets to learn about them</p>
</div>
<div class="section">
<h3>💻 Product Image Map</h3>
<img
src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='300'%3E%3Crect x='0' y='0' width='500' height='300' rx='30' fill='%230f172a'/%3E%3Crect x='40' y='40' width='420' height='200' rx='16' fill='%23152238' stroke='%2338bdf8' stroke-width='4'/%3E%3Crect x='60' y='220' width='380' height='30' rx='6' fill='%23334155'/%3E%3Ccircle cx='90' cy='235' r='6' fill='%2338bdf8'/%3E%3Crect x='120' y='225' width='260' height='10' rx='5' fill='%2364748b'/%3E%3Crect x='400' y='225' width='20' height='10' rx='3' fill='%2394a3b8'/%3E%3C/svg%3E"
usemap="#laptop"
alt="Click on laptop features"
class="map-img"
/>
<map name="laptop">
<area shape="rect" coords="100,50,400,200" onclick="alert('📺 4K High Resolution Display - Crystal clear visuals with 120Hz refresh rate'); return false;" alt="Display" title="High Resolution Display"/>
<area shape="rect" coords="100,210,400,280" onclick="alert('⌨️ Mechanical Keyboard - Premium RGB switches with tactile feedback'); return false;" alt="Keyboard" title="Mechanical Keyboard"/>
<area shape="rect" coords="200,260,300,295" onclick="alert('🖱️ Precision Trackpad - Smooth glass surface with gesture support'); return false;" alt="Trackpad" title="Precision Trackpad"/>
</map>
<p class="info">✅ Click on the Display, Keyboard, and Trackpad to see features</p>
</div>
<div class="section">
<h3>🎨 Interactive Shapes Navigation</h3>
<img
src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23ecfccb'/%3E%3Cpolygon points='200,30 320,170 80,170' fill='%237c3aed' opacity='0.8'/%3E%3Cpolygon points='50,195 140,285 50,285' fill='%230ea5e9'/%3E%3Cpolygon points='260,195 350,285 260,285' fill='%23f97316'/%3E%3Ccircle cx='200' cy='200' r='30' fill='%2322c55e' opacity='0.6'/%3E%3C/svg%3E"
usemap="#shapes"
alt="Click on shapes for navigation"
class="map-img"
/>
<map name="shapes">
<area shape="poly" coords="200,20,320,150,80,150" onclick="alert('🔝 Purple Triangle - Pointing to Top'); return false;" alt="Top Triangle" title="Go to Top"/>
<area shape="poly" coords="50,150,140,280,50,280" onclick="alert('⬅️ Cyan Triangle - Left navigation'); return false;" alt="Bottom Left" title="Go to Left"/>
<area shape="poly" coords="260,150,350,280,260,280" onclick="alert('➡️ Orange Triangle - Right navigation'); return false;" alt="Bottom Right" title="Go to Right"/>
<area shape="circle" coords="200,200,30" onclick="alert('🟢 Green Circle - Center point'); return false;" alt="Center" title="Center Circle"/>
</map>
<p class="info">✅ Click on the shapes (triangles and circle) to navigate</p>
</div>
</div>
</body>
</html>Loading preview...
<img
src="world-map.jpg"
alt="World map"
usemap="#world"
/>
<map name="world">
<!-- North America -->
<area
shape="rect"
coords="10,50,150,150"
href="/north-america"
alt="North America"
title="Click to explore North America"
/>
<!-- Europe -->
<area
shape="rect"
coords="200,50,350,150"
href="/europe"
alt="Europe"
/>
<!-- Africa (complex shape) -->
<area
shape="poly"
coords="200,150,350,150,350,280,200,280"
href="/africa"
alt="Africa"
/>
<!-- Catch-all -->
<area
shape="default"
href="/"
alt="Back to home"
/>
</map>Create your own interactive image map and see how it works!