ImageMap Component Samples

The ImageMap control displays an image with clickable hot spot regions, emulating <asp:ImageMap> from ASP.NET Web Forms. Hot spots can navigate to URLs or raise postback events, just like in Web Forms.

---

Navigation Hot Spots

Click a region to navigate. This mirrors the Web Forms HotSpotMode.Navigate behavior:

The image above has two hot spots defined:

• Left rectangle (0,0 → 100,50) — navigates to Bing
• Right rectangle (100,0 → 200,50) — navigates to GitHub

Code:

<ImageMap ImageUrl="image.png"
          AlternateText="Navigation demo"
          HotSpotMode="HotSpotMode.Navigate"
          HotSpots="@navigationHotSpots" />

@code {
    List<HotSpot> navigationHotSpots = new()
    {
        new RectangleHotSpot {
            Left = 0, Top = 0, Right = 130, Bottom = 200,
            NavigateUrl = "/ControlSamples/Button",
            AlternateText = "Button Samples"
        },
        new CircleHotSpot {
            X = 200, Y = 100, Radius = 60,
            NavigateUrl = "/ControlSamples/CheckBox",
            AlternateText = "CheckBox Samples"
        }
    };
}

---

PostBack Hot Spots

Click a region to trigger a server-side event with a PostBackValue. This is equivalent to handling ImageMap.Click in Web Forms code-behind:

Code:

<ImageMap HotSpotMode="HotSpotMode.PostBack"
          HotSpots="@postBackHotSpots"
          OnClick="HandleHotSpotClick" />

@code {
    void HandleHotSpotClick(ImageMapEventArgs e)
    {
        clickedRegion = e.PostBackValue;
    }
}

---

Mixed Hot Spot Modes

Each hot spot can override the default HotSpotMode. This image has a navigate region, a postback region, and an inactive region:

Hot spot behaviors on this image:

• Left third — Navigate to home page
• Center — PostBack (raises click event with value "center")
• Right third — Inactive (no action)

Code:

new RectangleHotSpot {
    Left = 0, Top = 0, Right = 150, Bottom = 180,
    HotSpotMode = HotSpotMode.Navigate,
    NavigateUrl = "/",
    AlternateText = "Home"
},
new CircleHotSpot {
    X = 225, Y = 90, Radius = 50,
    HotSpotMode = HotSpotMode.PostBack,
    PostBackValue = "center",
    AlternateText = "Click Me"
},
new RectangleHotSpot {
    Left = 300, Top = 0, Right = 450, Bottom = 180,
    HotSpotMode = HotSpotMode.Inactive,
    AlternateText = "Inactive Region"
}

---

Polygon Hot Spot

Use PolygonHotSpot for irregularly shaped regions, defined by coordinate pairs:

Code:

new PolygonHotSpot {
    Coordinates = "150,20,280,180,20,180",
    PostBackValue = "triangle",
    AlternateText = "Triangle region"
}

---

Accessibility

Always provide AlternateText on both the ImageMap and each HotSpot for screen readers. Use GenerateEmptyAlternateText for purely decorative images:

Code:

<ImageMap GenerateEmptyAlternateText="true" ... />