<style>
        .map-container {
            position: relative;
            width: 630px;
            height: 375px;
        }

        .map-container img {
            width: 100%;
            height: auto;
            display: block;
        }

        .clickable-area {
            position: absolute;
            border: 2px solid rgba(255, 0, 0, 0.5);
            cursor: pointer;
        }

        /* Rectangle area */
        .rect-area {
            top: 50px;
            left: 100px;
            width: 300px;
            height: 250px;
        }

        /* Circle area */
        .circle-area {
            top: 100px;
            left: 450px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        /* Polygon area */
        .poly-area {
            clip-path: polygon(600px 100px, 650px 200px, 700px 150px);
            width: 100px;
            height: 100px;
            top: 100px;
            left: 600px;
        }
    </style>
</head>
<body>

    <div class="map-container">
        <img src="https://images.pexels.com/photos/21014/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Map Image">

        <!-- Rectangle Area -->
        <a href="page1.html" class="clickable-area rect-area"></a>

        <!-- Circle Area -->
        <a href="page2.html" class="clickable-area circle-area"></a>

        <!-- Polygon Area -->
        <a href="page3.html" class="clickable-area poly-area"></a>
    </div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.