ASP.NET使用ImageMap控件

最新推荐文章于 2024-08-30 07:30:28 发布

fanwenyuan_fwy

最新推荐文章于 2024-08-30 07:30:28 发布

阅读量9.7k

点赞数 1

分类专栏： C#

C# 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

ASP.NET使用ImageMap控件

ImageMap控件允许在图片中定义一些热点（HotSpot）区域。当用户单击这些热点区域时，将会引发超链接或单击事件。

当需要对某张图片的局部实现交互时，可使用ImageMap控件。例如，以图片形式展示网站地图、流程图等。

也可以这样说：

ImageMap控件用于生成客户端的图像映射。一个图像映射显示一幅图片，点击图片的不同区域将激发事件。

比如，可以把图像映射当做一个奇特的导航条使用。这样，点击图像映射的不同区域，就会导航到网站的不同页面。

也可以把图像映射用作一种输入机制。比如，可以点击不同的产品图片来向购物车添加不同的产品。

ImageMap控件如下图所示：

ASP.NET工具箱中的ImageMap控件

ImageMap控件的属性

将工具箱中的ImageMap控件拖动到aspx页面中，或者在页面中选择一个ImageMap控件时，ImageMap控件的属性就显示在了“属性”窗口中。如下图所示：

ASP.NET“属性”窗口中的ImageMap控件的属性

在“属性”窗口中点击任意一个属性时，都会在窗口底部显示出对该属性的解释。

ImageMap控件中的主要属性如下：

HotSpotMode属性

HotSpotMode属性用于获取或设置单击热点区域后的默认行为方式。

ImageMap控件的HotSpotMode属性的枚举值如下表所示：

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

注意：HotSpotMode属性虽然为图片中所有热点区域定义了单击事件的默认行为方式，但在某些情况下，由于图片中热点区域的行为方式各不相同，所以还需要单独为每个热点区域定义HotSpotMode属性及其相关属性。

HotSpots属性

HotSpots属性用于获取HotSpots对象集合。

ImageMap控件由HotSpot类的实例组成。一个HotSpot定义图像映射中的一个可点击区域。ASP.NET Framework带有3种HotSpot类。

CircleHotSpot：用于在图像映射中定义一个圆形区域。
RectangleHotSpot：用于在图像映射中定义一个矩形区域。
PolygonHotSpot：用于在图像映射中定义一个不规则形状区域。

CircleHotSpot、RectangleHotSpot和PolygonHotSpot这3个子类的实例称为HotSpot对象。

创建HotSpot对象的步骤如下：

1. 在ImageMap控件上单击鼠标右键，在弹出的快捷菜单上选择“属性”命令，弹出“属性”窗口。

2. 在“属性”窗口中先选择HotSpots属性，再单击HotSpots属性右侧的按钮。如下图所示：

在ASP.NET“属性”窗口中选择ImageMap控件的HotSpots属性

3. 弹出“HotSpot 集合编辑器”对话框。如下图所示：

“HotSpot 集合编辑器”对话框

4. 在该对话框中，单击“添加”按钮右侧的向下箭头按钮，将会弹出一个下拉菜单。如下图所示：

“添加”按钮右侧的下拉菜单

该下拉菜单中包括CircleHotSpot（圆形热点区域）、RectangleHotSpot（方形热点区域）和PolygonHotSpot（多边形热点区域）等3个对象。

5. 单击要添加的对象，即可添加该对象。如下图所示：

添加选择的对象

6. 在“HotSpot 集合编辑器”对话框的右侧，为添加的热点区域（HotSpot）设置属性。

在定义每个热点区域的过程中，在“HotSpot 集合编辑器”对话框中主要设置两个属性：

一个是HotSpotMode及其相关属性。HotSpot对象中的HotSpotMode属性用于为单个热点区域设置单击后的显示方式，这与ImageMap控件的HotSpotMode属性基本相同。例如，当HotSpotMode属性值设置为PostBack时，则必须设置定义回转值的PostBackValue属性。

另一个是热点区域坐标属性。对于CircleHotSpot（圆形热点区域），需要设置半径Radius和圆心坐标X和Y；对于RectangleHotSpot（矩形热点区域），需要设置其左上右下的坐标，即Left、Top、Right、Bottom属性；对于PolygonHotSpot（多边形热点区域），需要设置每一个关键点坐标的Coordinates属性。

7. 属性值设置好以后，点击“确定”按钮，即可创建完成。

ImageMap控件支持的方法

Focus()方法

Focus()方法用于把表单初始焦点设置为该ImageMap控件。

ImageMap控件支持的事件

Click事件

点击ImageMap控件中的热点区域，并且HotSpotMode属性的值设置为PostBack时，则需要定义并实现该事件的处理程序。

实例

在ImageMapNavigate.aspx网页中包含一个用ImageMap控件创建的导航条。ImageMap控件包含3个RectangleHotSpot，用于定义导航条中显示的3个按钮的界限。程序代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageMapNavigate.aspx.cs" Inherits="ImageMapNavigate" %>
<!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>ASP.NET使用ImageMap控件-www.baike369.com</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ImageMap
            ID="ImageMap1"
            runat="server"
            ImageUrl="~/images/pic4.gif">
            <asp:RectangleHotSpot
                AlternateText="跳转到企业介绍栏目"
                NavigateUrl="1.aspx"
                Left="0"
                Top="0"
                Right="140"
                Bottom="53" />
            <asp:RectangleHotSpot
                AlternateText="跳转到产品中心栏目"
                NavigateUrl="2.aspx"
                Left="145"
                Top="0"
                Right="287"
                Bottom="53" />
            <asp:RectangleHotSpot
                AlternateText="跳转到新闻中心栏目"
                NavigateUrl="3.aspx"
                Left="292"
                Top="0"
                Right="431"
                Bottom="53" />
        </asp:ImageMap>
    </div>
    </form>
</body>
</html>

执行结果如下：

ASP.NET使用ImageMap控件的操作效果