用ASP.NET AJAX架構擴充HTML Map控制項

　　本文樣本原始碼或素材下載

　　一、 簡介

　　首先，我們注意到，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=http://tech.ddvip.com/2007-08/"imagessolarsys.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>