Using image map and popupcontrol extender

In interactive map client provided me a jquery library which is called zoom map and he instructed to work according to that but I found some problem in work with multiple version of jquery. For example jquery-min-1.3.2 does not support the coexistence with jquery-1.4.2.js. Anyway, I am going to describe here, how to use image map and popupcontrolextender. To perform this we need to follow these steps:

Step-1: We have to register the AjaxControlToolkit for using its control which we are calling here PopupControlExtender.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>


Step-2:
Consider an image containing lots of hot spot and when there is a click on that hot spot certain popup-winow will show up. So, here is the code for image and map.

< img id="homeimg" src="maps/map-bg-w-dots.jpg" style="border-width:0px" runat="server" alt="" usemap="#homemap" / >
< map name="homemap" id="homemap">
< area id="hole1area" runat="server" target="_self" onclick="showdetails(1)" shape="circle" style="cursnor:pointer" alt="" coords="314,178,7"/>
< area id="hole2area" runat="server" target="_self" onclick="showdetails(2)" shape="circle" style="cursor:pointer" alt="" coords="285,56,7"/>
< /map>



Here, onclick="showdetails(1)" can be used to populate data from some xml file relevant to hole1area if needed. As for example I have done in
my map project

Step-3:
Now we need the popup control extender that will generate a popup. So, here is the code below:

< asp:ScriptManager runat="server">< /asp:ScriptManager>
< cc1:PopupControlExtender runat="server" ID="MyPopupExtender1" OffsetX="550" OffsetY="300" PopupControlID="popupwindow1" TargetControlID="hole1area">
< /cc1:PopupControlExtender>
< cc1:PopupControlExtender runat="server" ID="MyPopupExtender2" OffsetX="550" OffsetY="300" PopupControlID="popupwindow2" TargetControlID="hole2area">
< /cc1:PopupControlExtender>


< div id='popupwindow1'>
Description for hole1...............
< /div>
< div id='popupwindow2'>
Description for hole2................
< /div>



Here, several thing to notice:
TargetControlID= the control which will be clicked on.
PopupControlID= the control which will be shown as popup.
OffsetX= the X position where popup will be shown
OffsetY= the Y position where popup will be shown.

So, this is the simplest way to use image map and popupcontrolextender. And whenever I started working client become excited as I was not using his solution but finally I ended up with good solution and he was quite satisfied. So, this project was one of the challenging task to me.

thanks. Masud.