您现在的位置: 捷凌网安 >> 服务器 >> WEB开 发 >> ASP.NET >> 正文
用ASP.NET AJAX框架扩展HTML Map控件

作者:佚名 责任编辑:左决 点击数: 更新时间:2008-2-28 9:52:49

在本文中,我将向你展示如何使用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>
  • 上一篇文章:

  • 下一篇文章:
  •  
    最进更新
    普通文章foxpro 更新源表05-05
    普通文章foxpro 让视图与数据源相连05-05
    普通文章foxpro 机动查询和数据输入05-05
    普通文章foxpro 多个本地数据05-05
    普通文章foxpro 维护源表05-05
    普通文章Oracle 10g Release2新功能之05-05
    普通文章将Oracle 10g内置的安全特性05-05
    普通文章ACCESS 2003 建立数据库视频05-05
    普通文章三种SQL分页法效率分析05-05
    普通文章优化MySQL数据库查询的三种方05-05
     
    推荐文章
    推荐文章教你怎样在MySQL中提高全文搜05-05
    推荐文章SQL Server中数据导入导出三05-05
    推荐文章缓冲技术提高JSP程序的性能和04-17
    推荐文章asp去除HTML标记的三个实用函04-17
    推荐文章何时使用DataGrid、DataList04-17
    推荐文章MySQL存储过程示例04-14
    推荐文章华硕搭建Exchange2007企业邮03-14
    推荐文章升级Win 2003到Windows 200803-14
    推荐文章windows Server 2003 搭建域03-14
    推荐文章服务器成为IT中心的6个理由03-11
     
    热点文章 
    普通文章SQL Server 2008分析服务概览05-01
    普通文章Dlink路由器VPN设置04-29
    推荐文章缓冲技术提高JSP程序的性能和04-17
    普通文章教你优化你的ASP程序04-17
    推荐文章asp去除HTML标记的三个实用函04-17
    普通文章ASP添加验证码的解决方法04-17
    推荐文章何时使用DataGrid、DataList04-17
    普通文章Asp.net中禁止用户多次登录04-17
    普通文章MySQL之表结构修改04-14
    推荐文章MySQL存储过程示例04-14

    | 设为首页 | 加入收藏 | 联系站长 | 广告服务 | 友情链接 | 版权申明 | 网站地图 |

    在线交流 捷凌网安主群:51649627
    Copyright 2007-2008 © 捷凌网安. All rights reserved.
    备案序号:蜀ICP备08001812号