ASP.NET2.0 新增控件-ImageMap

wangyihust

浏览: 438245 次

最近访客更多访客>>

xuHuihui

woodding2008

wxn_yxm

qcsjliu

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (401)

社区版块

存档分类

ASP ASP.net XHTML Web UI

转自MS.Tech

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

<o:p> </o:p>

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

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

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

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

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

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

? Click：对热点区域的点击操作。通常在HotSpotMode为PostBack时用到。<o:p></o:p>

<o:p> </o:p>

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

<o:p> </o:p>

示例一：ImageMap 多种HotSpotMode 示例<o:p></o:p>

<o:p> </o:p>

<%@ Page Language="C#" %><o:p></o:p>

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

<o:p> </o:p>

</script><o:p></o:p>

<title>Untitled Page</title><o:p></o:p>

</head><o:p></o:p>

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

<o:p></o:p>

<asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"<o:p></o:p>

runat="Server"> <o:p></o:p>

<o:p></o:p>

<asp:RectangleHotSpot<o:p></o:p>

hotspotmode="Navigate"<o:p></o:p>

NavigateUrl="navigate1.htm"<o:p></o:p>

alternatetext="Button 1"<o:p></o:p>

top="30"<o:p></o:p>

left="175"<o:p></o:p>

bottom="110"<o:p></o:p>

right="355"><o:p></o:p>

</asp:RectangleHotSpot><o:p></o:p>

<o:p></o:p>

<asp:RectangleHotSpot <o:p></o:p>

hotspotmode="Navigate"<o:p></o:p>

NavigateUrl="navigate2.htm"<o:p></o:p>

alternatetext="Button 2" <o:p></o:p>

top="155"<o:p></o:p>

left="175"<o:p></o:p>

bottom="240"<o:p></o:p>

right="355"> <o:p></o:p>

</asp:RectangleHotSpot><o:p></o:p>

<o:p></o:p>

<asp:RectangleHotSpot<o:p></o:p>

hotspotmode="Navigate"<o:p></o:p>

NavigateUrl="navigate3.htm"<o:p></o:p>

alternatetext="Button 3" <o:p></o:p>

top="285"<o:p></o:p>

left="175"<o:p></o:p>

bottom="365"<o:p></o:p>

right="355"><o:p></o:p>

</asp:RectangleHotSpot> <o:p></o:p>

<o:p></o:p>

</asp:imagemap><o:p></o:p>

<o:p> </o:p>

</div><o:p></o:p>

</form><o:p></o:p>

</body><o:p></o:p>

</html><o:p></o:p>

<o:p> </o:p>

示例二：ImageMap PostBack 模型示例<o:p></o:p>

<o:p> </o:p>

<%@ Page Language="C#" %><o:p></o:p>

void Buttons_Clicked(object sender, ImageMapEventArgs e)<o:p></o:p>

{<o:p></o:p>

label1.Text = e.PostBackValue + " clicked!";<o:p></o:p>

}<o:p></o:p>

</script><o:p></o:p>

<title>Untitled Page</title><o:p></o:p>

</head><o:p></o:p>

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

<asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"<o:p></o:p>

hotspotmode="Postback" onclick="Buttons_Clicked" runat="Server"> <o:p></o:p>

<o:p></o:p>

<asp:RectangleHotSpot<o:p></o:p>

hotspotmode="Postback"<o:p></o:p>

postbackvalue="Button1"<o:p></o:p>

alternatetext="Button 1"<o:p></o:p>

top="30"<o:p></o:p>

left="175"<o:p></o:p>

bottom="110"<o:p></o:p>

right="355"><o:p></o:p>

</asp:RectangleHotSpot><o:p></o:p>

<o:p></o:p>

<asp:RectangleHotSpot <o:p></o:p>

hotspotmode="Postback"<o:p></o:p>

postbackvalue="Button2"<o:p></o:p>

分享到：

ASP.NET2.0 新增控件-BulletedList | ASP.NET 2.0页面框架的几处变化

2006-04-13 12:34
浏览 1527
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论