Usage of ImageMap control in ASP. NET

2021-07-21 08:10:27
OfStack

With the ASP. NET ImageMap control, you can create an image that contains many areas (hot areas) that can be clicked by the user, which are called "hot spots". Every hot spot can be a single hyperlink or postback event.

Common properties:

HotSpotMode Attributes

The HotSpotMode property is used to get or set the default behavior after a hot spot area is clicked.
The enumerated values of the HotSpotMode property of the ImageMap control are shown in the following table:

枚举值	说明
Inactive	无任何操作，即此时就像1张没有热点区域的普通图片
NotSet	未设置项，同时也是默认项。虽然名为未设置，但是默认情况下将执行定向操作，即链接到指定的URL地址。如果未指定URL地址，则默认链接到应用程序根目录下
Navigate	定向操作项。链接到指定的URL地址。如果未指定URL地址，则默认链接到应用程序根目录下
PostBack	回传操作项。单击热点区域后，将触发控件的Click事件

Note: Although the HotSpotMode attribute defines the default behavior of click events for all hot spots in the picture, in some cases, because hot spots in the picture behave differently, it is necessary to define the HotSpotMode attribute and its related attributes separately for each hot spot.

HotSpots Properties

The HotSpots property is used to get a collection of HotSpots objects.
The ImageMap control consists of instances of the HotSpot class. One HotSpot defines one clickable area in the image map. ASP. NET Framework comes with three HotSpot classes.

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

Instances of the three subclasses CircleHotSpot, RectangleHotSpot, and PolygonHotSpot are called HotSpot objects.

Sample code:

Default.aspx



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title> Example 8-4</title>

    <link id="InstanceStyle" href="StyleSheet.css" type="text/css" rel="stylesheet" />

</head>

<body>

    <form id="Form1" runat="server">

        <div>

            <fieldset style="width: 290px">

                <legend class="mainTitle">ImageMap Typical application of control </legend>

                <br />

                <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Image/pic1.png" OnClick="ImageMap1_Click">

                    <asp:RectangleHotSpot AlternateText=" Module " Bottom="175" Left="77" NavigateUrl="http://localhost/"

                        Right="150" Target="_blank" Top="119" />

                    <asp:CircleHotSpot AlternateText=" Deal with 1" HotSpotMode="PostBack" PostBackValue="Pro1"

                        Radius="39" X="241" Y="50" />

                    <asp:CircleHotSpot AlternateText=" Deal with 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>

Default.aspx.cs



using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

 

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void ImageMap1_Click(object sender, ImageMapEventArgs e)

    {

        String region = "";

        switch (e.PostBackValue)

        {

            case "Pro1":

                region = " Deal with 1";

                break;

            case "Pro2":

                region = " Deal with 2";

                break;

        }

        LabMessage.Text = " What you clicked is <b>" + region + "</b>.";

    }

}