用ASP.NET AJAX框架扩展HTML Map控件 ASP.NET AJAX HTML Map 软件-计世网

i社区用户:

密码:

搜索：

首页| 资讯| 信息化| 视频| 专题| 创业| 技术天地| 企业博客| 职场| 周报全文| 方案中心 |电子杂志

市场会展| Blog| i社区| 社区联盟| RSS| 直播 | 发行| wiki |i 搜| 下载| 英才招聘|CIO文库

IT两会 | 互联网年会

产品中心| 笔记本|台式机| DIY|数码| 服务器|网络通信| 手机|软件|显示器|信息安全|存储|组网| 动漫

　软件频道

用ASP.NET AJAX框架扩展HTML Map控件

2007-07-31 21:52:41

天极Yesky/朱先忠

【摘要】在本文中，我将向你展示如何使用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 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函数与之相关联。当鼠标在这些热点上移动时，这两个函数将被激活，相应信息被显示出来。有关这两个函数，我们将在后面详细讨论。

1 2 3 4

（网页编辑：东子）

如果您对“用ASP.NET AJAX框架扩展HTML Map控件”有任何疑问要咨询，或者您对我们专家的解答有任何疑义，请您点击以下的链接提交意向单，我们的编辑和信息化专家将会很快为您做出回答，您提供的信息经过审核后将有机会出现在我们的网页上。

专家介绍

制造业第一是怎么炼成的

Informatica--数据集成业务

开源精神的化身--Linux

文章搜索

本周TOP10

.1 潜移默化学英语 V4.31

.2 偷窥美女洗澡

.3 按摩女“失足”全过程

.4 Nero Burning Rom 6....

.5 最新传奇私服1.76-1....

.6 3721上网助手2005

.7 POCO 2005正式版

.8 东方卫士 2005（完...

.9 网络守望者1.5

.10 看天下RSS新闻阅读器...

	相关文章
Gmail改进对Office文档的Html格式预览关于Flex与asp.net的WebService通讯 ASP.NET中数据校验部分的封装与应用 Java程序把Word文档直接换成Html文件网友当心 HTML文件也能格式化硬盘

	发表评论　　您的姓名　　您的Email 　　发布