ASP.NET2.0 新增控件-ImageMap

ImageMap控件详解

最新推荐文章于 2017-02-13 11:38:34 发布

最新推荐文章于 2017-02-13 11:38:34 发布 · 100 阅读

文章标签：

#ui #xhtml #c#

本文详细介绍了ASP.NET中的ImageMap控件，包括其主要属性HotSpotMode、HotSpots及Click的操作方式。并通过示例展示了如何使用不同类型的热点区域进行导航和回发操作。

转自MS.Tech

ImageMap控件是一个让你可以在图片上定义热点（HotSpot）区域的服务器控件。用户可以通过点击这些热点区域进行回发（PostBack）操作或者定向（Navigate）到某个URL位址。该控件一般用在需要对某张图片的局部范围进行互动操作时，其主要属性有HotSpotMode、HotSpots和主要操作Click。

? HotSpotMode：顾名思义为热点模式，对应枚举类型System.Web.UI.WebControls.HotSpotMode。其选项及说明如下：

1) NotSet：未设置项。虽然名为未设置，但其实默认情况下会执行定向操作，定向到你指定的URL位址去。如果你未指定URL位址，那默认将定向到自己的Web应用程序根目录。

2) Navigate：定向操作项。定向到指定的URL位址去。如果你未指定URL位址，那默认将定向到自己的Web应用程序根目录。

3) PostBack：回发操作项。点击热点区域后，将执行后部的Click事件。

4) Inactive：无任何操作，即此时形同一张没有热点区域的普通图片。

? HotSpots：该属性对应着System.Web.UI.WebControls.HotSpot对象集合。HotSpot类是一个抽象类，它之下有CircleHotSpot（圆形热区）、RectangleHotSpot（方形热区）和PolygonHotSpot（多边形热区）三个子类。实际应用中，都可以使用上面三种类型来定制图片的热点区域。如果需要使用到自定义的热点区域类型时，该类型必须继承HotSpot抽象类。下面即有个自定义的菱形热区DiamondHotSpot范例可以参考。

? Click：对热点区域的点击操作。通常在HotSpotMode为PostBack时用到。

对ImageMap控件有了以上一个基本了解后，接着看ASP.NET QuickStart提供个两个应用示例和最后一个自定义菱形热区示例就会有所体会了。

示例一：ImageMap 多种HotSpotMode 示例

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

</script>

<title>Untitled Page</title>

</head>

<body>

<div>

<h3><font face="Verdana">ImageMap 多种 HotSpotMode 示例</font></h3>

<asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"

runat="Server">

<asp:RectangleHotSpot

hotspotmode="Navigate"

NavigateUrl="navigate1.htm"

alternatetext="Button 1"

top="30"

left="175"

bottom="110"

right="355">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Navigate"

NavigateUrl="navigate2.htm"

alternatetext="Button 2"

top="155"

left="175"

bottom="240"

right="355">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Navigate"

NavigateUrl="navigate3.htm"

alternatetext="Button 3"

top="285"

left="175"

bottom="365"

right="355">

</asp:RectangleHotSpot>

</asp:imagemap>

</div>

</form>

</body>

</html>

示例二：ImageMap PostBack 模型示例

<%@ Page Language="C#" %>

void Buttons_Clicked(object sender, ImageMapEventArgs e)

{

label1.Text = e.PostBackValue + " clicked!";

}

</script>

<title>Untitled Page</title>

</head>

<body>

<div>

<h3>

<font face="Verdana">ImageMap PostBack 模型示例</font></h3>

<asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"

hotspotmode="Postback" onclick="Buttons_Clicked" runat="Server">

<asp:RectangleHotSpot

hotspotmode="Postback"

postbackvalue="Button1"

alternatetext="Button 1"

top="30"

left="175"

bottom="110"

right="355">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Postback"

postbackvalue="Button2"

alternatetext="Button 2"

top="155"

left="175"

bottom="240"

right="355">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Postback"

postbackvalue="Button3"

alternatetext="Button 3"

top="285"

left="175"

bottom="365"

right="355">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Postback"

postbackvalue="Background"

alternatetext="Background"

top="0"

left="0"

bottom="390"

right="540">

</asp:RectangleHotSpot>

</asp:imagemap>

<p>

<h3>

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

</font>

</h3>

</p>

</div>

</form>

</body>

</html>

示例三：自定义热点区域 DiamondHotSpot 菱形热点区域

1. 创建DiamondHotSpot类

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;

namespace HotSpotTest

{

public class DiamondHotSpot : System.Web.UI.WebControls.HotSpot

{

public int CenterX

{

get

{

object val = ViewState["centerx"];

if (val == null)

return 0;

else

return (int)val;

}

set

{

ViewState["centerx"] = value;

}

public int CenterY

{

get

{

object val = ViewState["centery"];

if (val == null)

return 0;

else

return (int)val;

}

set

{

ViewState["centery"] = value;

}

public int Width

{

get

{

object val = ViewState["width"];

if (val == null)

return 0;

else

return (int)val;

}

set

{

ViewState["width"] = value;

}

public int Height

{

get

{

object val = ViewState["height"];

if (val == null)

return 0;

else

return (int)val;

}

set

{

ViewState["height"] = value;

}

protected override string MarkupName

{

get

{

return "poly";

}

public override string GetCoordinates()

{

return CenterX.ToString() + "," +

(CenterY - Height / 2).ToString() + "," +

(CenterX + Width / 2).ToString() + "," +

CenterY.ToString() + "," +

CenterX.ToString() + "," +

(CenterY + Height / 2).ToString() + "," +

(CenterX - Width / 2).ToString() + "," +

CenterY.ToString();

}

2. 在页面写 Register 指令

<%@ Register TagPrefix="HotSpotTest" Namespace="HotSpotTest" %>

3. 在后部代码里动态添加菱形热区，或者直接在页面代码里声明菱形热区

? 后部代码动态添加：

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

HotSpotTest.DiamondHotSpot dhs = new HotSpotTest.DiamondHotSpot();

dhs.CenterX = 100;

dhs.CenterY = 50;

dhs.Height = 100;

dhs.Width = 50;

ImageMap1.HotSpots.Add(dhs);

}

? 页面代码声明：

<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="hotspot.jpg" HotSpotMode="PostBack">

<HotSpotTest:DiamondHotSpot CenterX="100" CenterY="50" Height="100" Width="50" />

</asp:ImageMap>

[总结]：在大部分Web应用中可能很少会用到ImageMap，但正因为有了ImageMap，才让Web应用更加多姿多彩。有了ImageMap，我们可以动态的在一张图片中的某个局部范围内进行相应的处理请求的梦想再也不遥远。