Usage of ImageMap control

The ImageMap control allows you to create an image that contains many areas (hot zones) that can be clicked by the user, called "points of action". Each point of action can be a separate hyperlink or postback event.

Common properties:

HotSpotMode property

The HotSpotMode property is used to get or set the default behavior after clicking a hotspot area.
The enumeration values of the HotSpotMode property of the ImageMap control are shown in the following table:

Enumeration values	illustrate
Inactive	No operation, that is, it is like a normal picture without hot spots
NotSet	No item is set, and it is also the default item. Although the name is not set, a directional operation is performed by default, i.e. linking to the specified URL address. If the URL address is not specified, the default link is to the application root directory
Navigate	Directional operation item. Link to the specified URL address. If the URL address is not specified, the default link is to the application root directory
PostBack	Return operation item. After clicking on the hotspot area, the control's Click event will be triggered

Note: Although the HotSpotMode property defines the default behavior of click events for all hotspot areas in the picture, in some cases, since the hotspot areas in the picture are different, it is also necessary to define the HotSpotMode property and its related properties for each hotspot area separately.

HotSpots Properties

The HotSpots property is used to get a collection of HotSpots objects.
The ImageMap control consists of an instance of the HotSpot class. A HotSpot defines a clickable area in the image map. Framework comes with 3 HotSpot classes.

CircleHotSpot: Used to define a circular area in the image map.
RectangleHotSpot: Used to define a rectangular area in the image map.
PolygonHotSpot: Used to define an irregular shape area in the image map.

CircleHotSpot, RectangleHotSpot and PolygonHotSpot are called HotSpot objects.

Sample code:

Copy the codeThe code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">

<html xmlns="http:///1999/xhtml">

<head runat="server">
<title>Example 8-4</title>

    <link  href="" type="text/css" rel="stylesheet" />

</head>

<body>

    <form  runat="server">

        <div>

            <fieldset style="width: 290px">
<legend class="mainTitle">Typical application of ImageMap control</legend>

                <br />

                <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Image/" OnClick="ImageMap1_Click">
<asp:RectangleHotSpot AlternateText="Module" Bottom="175" Left="77" NavigateUrl="http://localhost/"

                        Right="150" Target="_blank" Top="119" />
<asp:CircleHotSpot AlternateText="Processing 1" HotSpotMode="PostBack" PostBackValue="Pro1"

                        Radius="39" X="241" Y="50" />
<asp:CircleHotSpot AlternateText="Processing 2" HotSpotMode="PostBack" PostBackValue="Pro2"

                        Radius="39" X="241" Y="285" />
<asp:PolygonHotSpot AlternateText="Engine" Coordinates="366,118,325,160,372,206,411,161"

                        HotSpotMode="Inactive" />

                </asp:ImageMap>

                <br />

                <asp:Label ID="LabMessage" runat="server"></asp:Label>

            </fieldset>

        </div>

    </form>

</body>

</html>

Copy the codeThe code is as follows:

using System;

using ;

using ;

using ;

using ;

using ;

using ;

using ;

using ;

public partial class _Default : 

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void ImageMap1_Click(object sender, ImageMapEventArgs e)

    {

        String region = "";

        switch ()

        {

            case "Pro1":
region = "process 1";

                break;

            case "Pro2":
region = "Processing 2";

                break;

        }
= "You clicked on <b>" + region + "</b>.";

    }

}