首页 > OOP语言 > AJAX > 正文

用ASP.NET AJAX框架扩展HTML Map控件
2012-08-22 19:06:02   来源:www.bianceng.cn   评论:0 点击:

暂时无描述信息

一、简介

首先,我们注意到,ASP.NET 2.0中也提供了一个服务器控件ImageMap。此控件是一个让你可以在图片上定义热点(HotSpot)区域的服务器控件。用户可 以通过点击这些热点区域进行回发(PostBack)操作或者转发到某个URL地址。典型情况下,该控件用于需要对某张图片的局部范围进行互动操作。然而,这个控件的不足之处 在于,在点击这些热点区域进行回发时将导致整个Web页面的刷新。

在本文中,我们将基于ASP.NET AJAX技术对普通的HTML Map控件加以扩展,以达到在点击其上的 热点区域时,在显示有关详细信息时仅仅导致局部的页面更新,从而使之适应Web 2.0应用程序开发潮流。

下面图1展示了本文示例程序运行时的一个快照。

\

图1.使用AJAX技术扩展后的Map控件热点点击仅引发局部更新。

从上图中 看到,当鼠标悬浮于上图太阳系中的木星(木星)上时,有关该星球的细节信息将以一个弹出窗口形式友好地展示出来(注:此图取自MSDN,这里没有翻译相应单词)。

二、创建一个AJAX示例网站

启动Visual Studio 2005,选择“文件→新建网站…”,然后选择“ASP.NET AJAX-Enabled Web Site”模板,命名工程为“Ajax_ImageMap”,并选择C#作为内置支持语言,最后点击OK。

然后,添加一个新的ASPX页面ImageMap.aspx,并且按如 下所示修改其中的HTML代码部分:

以下是引用片段:
<IMG SRC="images\solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0
  ALT="Solar System" USEMAP="#SystemMap">
    <MAP NAME="SystemMap">
      <AREA SHAPE="rect" COORDS="0,0,82,126"
        onmouseover="javascript:GetAreaInfo(event, 'sun');"  onmouseout="javascript:HidePopup();">
      <AREA SHAPE="circle" COORDS="90,58,3"
         onmouseover="javascript:GetAreaInfo(event, 'merglobe');" onmouseout="javascript:HidePopup();"
>
       <AREA SHAPE…………(省略)
    </MAP>

在上面代码中,我们添加了一个HTML 元素和一个HTML 元素(注: VS2005工具栏中没有提供现成的控件,只能手工添加)。其中定义了各个星球相应的热点形状及坐标信息。而且,每一个热点都有一个相应的onmouseover和onmouseout JavaScript函数与之相关联。当鼠标在这些热点上移动时,这两个函数将被激活,相应信息被显示出来。有关这两个函数,我们将在后面详细讨论。

相关热词搜索:

上一篇:ECMAScript基础类以及Asp.net Ajax对类Object的扩展
下一篇:静态页中利用AJAX.NET实现无刷新页面

分享到: 收藏