This is the third article in my series of articles that are targeting the new AJAX 1.0 extensions in ASP.NET 2.0.

In this article we are going to show how to easily integrate an HTML Image Map control with AJAX 1.0 extensions using the coolest feature of AJAX 1.0 which is AJAX Services. What we will show in this article is very handy and useful. For instance, you can have a facility on your applications to show a map with clickable areas in such a way, when an area is clicked, a popup window will show more detailed information about the clicked area. Without the use of AJAX, the user would have to wait for the page to post back to the server, get the data and then show them! However, this is unfeasible and makes user experiences very poor. Another option would be when the page loads, it loads all related data for all clickable areas on the page, but this has its own performance weaknesses and also is not a preferred way for solving such an issue.

The above discussion shows the importance of using AJAX to populate the popup window with the related data from the server by utilizing the new features of AJAX and mainly AJAX Service.

A snapshot of what you are expecting from this article can be shown in Figure 1

Figure 1: Expected Ajaxified ImageMap HTML control

As you can see above, a map of Lebanon (author’s mother country) is shown and a hover over of the word Lebanon on the image caused a tiny and elegant popup window to show up giving more details about the area hovered over. In this example the popup will only echo the text in the hovered over area.