ex1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clickable Map of India</title>



</head>
<body>
    
    <!-- Importing the Indian map image -->
    <img src="C:\Users\A12-51\Downloads\india-map.jpg" alt="Map of India" usemap="#indiaMap" style="border: 5px solid red;">

    <!-- Defining clickable areas on the map -->
    <map name="indiaMap">
        <!-- Example for Maharashtra -->
       
        <area shape="poly" coords="233,726,221,588,257,528,465,552,452,639" href="https://en.wikipedia.org/wiki/Maharashtra" alt="Maharashtra">
        <!-- Example for Tamil Nadu -->
        <area shape="poly" coords="325,875,358,997,451,819" href="https://en.wikipedia.org/wiki/Tamil_Nadu" alt="Tamil Nadu">
        <!-- Add more areas for other states similarly -->
        <p class="map-description">Click on a state to learn more about it.</p>
    </map>

</body>
</html>