使用asp.net ajax框架扩展html map控件_H5之家 - 中国HTML5教程资源分享第一站

使用asp.net ajax框架扩展html map控件_asp.net技巧

作者：网友供稿点击：0

　　西部数码-全国虚拟主机10强！20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!虚拟主机可在线rar解压,自动数据恢复设置虚拟目录等.虚拟主机免费赠送访问统计,企业邮局.Cn域名注册10元/年,自助建站480元起,免费试用7天,满意再付款!P4主机租用799元/月.月付免压金!

文章页数：[1]

　　【摘要】在本文中，我将向你展示如何使用ASP.NET AJAX框架对添加可点击的热点的HTML Map控件进行扩展。经扩展后，当我们的鼠标移动到这些热点上后，即弹出关于这些热点的详细信息;但是，这些详细信息都是通过AJAX异步方式从远程服务中取得的。

　　一、简介

　　首先，我们注意到，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>
            <AREA SHAPE="rect" COORDS="0,0,82,126"
                >
            <AREA SHAPE="circle" COORDS="90,58,3"

>
            <AREA SHAPE…………（省略）
        </MAP>

　　在上面代码中，我们添加了一个HTML 元素和一个HTML

文章整理：西部数码--专业提供域名注册、虚拟主机服务

以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!