Extending an HTML map control with the ASP.net AJAX framework

First, Introduction

First, we note that ASP.net 2.0 also provides a server control ImageMap. This control is a server control that allows you to define a hotspot (HotSpot) area on the picture. Users can either click the Hotspot area for a postback (postback) operation or forward to a URL address. Typically, the control is used to interact with the local scope of a picture. However, the disadvantage of this control is that clicking on these hotspot areas for postback will cause the entire Web page to be refreshed.

In this article, we will extend the normal HTML map control based on ASP.net Ajax technology to meet the Web 2.0 application Development trend When we click on the Hotspot area, and only cause local page updates when the details are displayed.

Figure 1 below shows a snapshot of the sample program at run time.

Figure 1. The map control hotspot with the AJAX technology extension only causes local updates.

As seen above, when the mouse hovers over Jupiter (Jupiter) in the upper solar system, details about the planet are displayed amicably in a pop-up window (note: This figure is taken from MSDN and there is no translation of the corresponding word).

Second, create an AJAX sample Web site

Start Visual Studio 2005, select file → new site ..., then select the asp.net ajax-enabled Web site template, name the project "Ajax_imagemap", and select C # as the built-in support language, and then click OK.

Then, add a new ASPX page imagemap.aspx, and modify the HTML code section as follows:

以下是引用片段：
　　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>

In the code above, we added an HTML element and an HTML element (note: The VS2005 toolbar does not provide ready-made controls and can only be added manually). It defines the corresponding hot shape and coordinate information of each planet. Also, each hotspot has a corresponding onmouseover and onmouseout JavaScript function associated with it. When the mouse moves over these hotspots, the two functions are activated and the corresponding information is displayed. For these two functions, we'll discuss them in more detail later.