HTML Image Maps

🗺️ What are Image Maps?

HTML Image Maps allow you to create clickable areas on an image. You can define different shapes (rectangles, circles, polygons) as clickable regions that link to different pages or trigger actions.


<!-- Basic image map structure -->
<img src="image.jpg" usemap="#mymap">
<map name="mymap">
  <area shape="rect" coords="0,0,50,50" href="page1.html">
</map>

Image Map Elements

🖼️

Image

The base image with usemap attribute

<img src="map.jpg" usemap="#areas">

🗺️

Map

Container for clickable areas

<map name="areas"></map>

📍

Area

Define clickable regions

<area shape="rect" coords="x,y,x2,y2">

🔗

Links

Areas can link to pages or actions

href="page.html" target="_blank"

🔹 Rectangle Areas

Create rectangular clickable areas:

<!-- Image with rectangular clickable areas -->
<img src="/placeholder.svg?height=200&width=300" 
     usemap="#rectangles" width="300" height="200">

<map name="rectangles">
  <!-- Top-left rectangle -->
  <area shape="rect" coords="10,10,140,90" 
        href="#" title="Top Left Area" 
        onclick="alert('Top Left Clicked!')">
  
  <!-- Bottom-right rectangle -->
  <area shape="rect" coords="160,110,290,190" 
        href="#" title="Bottom Right Area"
        onclick="alert('Bottom Right Clicked!')">
</map>

Output: (Click on the colored areas)

🔹 Circle Areas

Create circular clickable areas:

<!-- Image with circular clickable area -->
<img src="/placeholder.svg?height=150&width=200" 
     usemap="#circles" width="200" height="150">

<map name="circles">
  <!-- Circle: center-x, center-y, radius -->
  <area shape="circle" coords="100,75,50" 
        href="#" title="Circle Area"
        onclick="alert('Circle Clicked!')">
</map>

Output: (Click on the circle)

🔹 Polygon Areas

Create complex shapes with polygon areas:

<!-- Image with polygon clickable area -->
<img src="/placeholder.svg?height=150&width=200" 
     usemap="#polygons" width="200" height="150">

<map name="polygons">
  <!-- Triangle: x1,y1,x2,y2,x3,y3 -->
  <area shape="poly" coords="100,20,50,120,150,120" 
        href="#" title="Triangle Area"
        onclick="alert('Triangle Clicked!')">
</map>

Output: (Click on the triangle)

🔹 Practical Example: Navigation Menu

Create an image-based navigation menu:

<!-- Navigation image map -->
<img src="/placeholder.svg?height=100&width=400" 
     usemap="#navigation" width="400" height="100">

<map name="navigation">
  <area shape="rect" coords="0,0,100,100" 
        href="#home" title="Home" 
        onclick="showPage('home')">
  <area shape="rect" coords="100,0,200,100" 
        href="#about" title="About"
        onclick="showPage('about')">
  <area shape="rect" coords="200,0,300,100" 
        href="#services" title="Services"
        onclick="showPage('services')">
  <area shape="rect" coords="300,0,400,100" 
        href="#contact" title="Contact"
        onclick="showPage('contact')">
</map>

<script>
function showPage(page) {
  alert('Navigating to: ' + page.toUpperCase());
}
</script>