I referred to the example on your site for setting up a tooltip with an imagemap and polygon hotspots.
However, I dont see how the tooltips for the polygon hotspots get populated with the data that is retrieved from a web service.
I see that a webservice is called, but I dont see how this webservice populates the data for each tooltip.
I have an imagemap of the united states, each state has its own polygon hotspot. When the user hovers a state, I want to show the sales rep and contact info ect (from database)
How do I set the content for each tooltip based on the polygon hotspot and data I retrieve from the database?
Please assist...
Server code:
Protected
Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
For Each spot As PolygonHotSpot In Me.MapOfUsa.HotSpots
Me.RadToolTipManager1.TargetControls.Add(spot.AlternateText, spot.AlternateText, True)
Next
End Sub
HTML code
<
tr>
<td align="center">
<telerik:RadWindowManager Skin="Hay" ID="RadWindowManager1" Modal="true" runat="server"
Width="650" Height="600" VisibleStatusbar="false" DestroyOnClose="true" OnClientPageLoad="AdjustSize">
</telerik:RadWindowManager>
<asp:ImageMap id="MapOfUsa" runat="server" ImageUrl="~/uSAMAP.gif">
<asp:PolygonHotSpot Coordinates="230,35,294,38,299,57,299,79,228,79" AlternateText="N. Dakota"/>
<asp:PolygonHotSpot Coordinates="227,80,299,80,302,120,282,116,226,116" AlternateText="S. Dakota"/>
<asp:PolygonHotSpot Coordinates="229,35,226,87,154,81,145,86,131,69,123,21" AlternateText="Montana"/>
<asp:PolygonHotSpot Coordinates="224,89,223,143,148,136,156,83" AlternateText="Wyoming"/>
<asp:PolygonHotSpot Coordinates="169,141,241,147,241,197,162,191" AlternateText="Colorado"/>
<asp:PolygonHotSpot Coordinates="112,20,121,20,132,87,152,87,149,119,94,111" AlternateText="Idaho"/>
<asp:PolygonHotSpot Coordinates="42,10,66,7,111,18,104,57,48,51,40,36" AlternateText="Washington"/>
<asp:PolygonHotSpot Coordinates="40,42,47,54,104,60,92,111,18,94" AlternateText="Oregon"/>
<asp:PolygonHotSpot Coordinates="57,106,120,118,101,206,49,147" AlternateText="Nevada"/>
<asp:PolygonHotSpot Coordinates="122,118,149,122,146,138,167,141,159,191,110,183" AlternateText="Utah"/>
<asp:PolygonHotSpot Coordinates="16,96,55,104,46,145,98,209,96,239,71,239,24,185" AlternateText="California"/>
<asp:PolygonHotSpot Coordinates="109,185,159,193,151,271,138,269,101,247,103,208" AlternateText="Arizona"/>
<asp:PolygonHotSpot Coordinates="226,117,301,122,315,159,244,160,243,145,225,142" AlternateText="Nebraska"/>
<asp:PolygonHotSpot Coordinates="243,162,318,162,325,172,325,196,244,196" AlternateText="Kansas"/>
<asp:PolygonHotSpot Coordinates="231,198,324,199,328,249,265,233,264,204,233,203" AlternateText="Oklahoma"/>
<asp:PolygonHotSpot Coordinates="162,193,229,199,226,269,164,267,160,271,152,270" AlternateText="New Mexico"/>
<asp:PolygonHotSpot Coordinates="230,204,262,205,264,236,332,253,338,300,275,355,224,308" AlternateText="Texas"/>
<asp:PolygonHotSpot Coordinates="293,38,317,35,359,49,341,70,337,94,352,107,302,111" AlternateText="Minnesota"/>
<asp:PolygonHotSpot Coordinates="342,68,358,66,395,87,390,118,364,122,352,102,339,93" AlternateText="Wisconsin"/>
<asp:PolygonHotSpot Coordinates="303,114,352,109,365,129,353,151,316,156" AlternateText="Iowa"/>
<asp:PolygonHotSpot Coordinates="316,158,353,154,382,196,378,207,373,202,329,206,327,171" AlternateText="Missouri"/>
<asp:PolygonHotSpot Coordinates="327,209,370,205,376,211,374,223,363,255,336,256,331,248" AlternateText="Arkansas"/>
<asp:PolygonHotSpot Coordinates="335,259,363,258,362,282,383,282,392,306,337,300,342,283" AlternateText="Louisiana"/>
<asp:PolygonHotSpot Coordinates="365,124,389,120,393,133,398,172,393,185,382,193,355,155" AlternateText="Illinois"/>
<asp:PolygonHotSpot Coordinates="359,68,379,58,423,64,454,116,398,131,394,85" AlternateText="Michigan"/>
<asp:PolygonHotSpot Coordinates="396,133,427,127,431,166,405,185,391,191,402,172" AlternateText="Indiana"/>
<asp:PolygonHotSpot Coordinates="386,193,409,186,435,163,456,167,463,178,450,190,386,201" AlternateText="Kentucky"/>
<asp:PolygonHotSpot Coordinates="383,203,468,190,466,196,445,211,376,224" AlternateText="Tennessee"/>
<asp:PolygonHotSpot Coordinates="374,227,401,222,403,284,387,288,384,280,362,282,369,263" AlternateText="Mississippi"/>
<asp:PolygonHotSpot Coordinates="402,221,432,217,444,254,442,273,412,275,414,283,406,283" AlternateText="Alabama"/>
<asp:PolygonHotSpot Coordinates="427,127,468,117,472,147,457,165,433,160" AlternateText="Ohio"/>
<asp:PolygonHotSpot Coordinates="473,148,485,147,487,154,506,145,483,173,469,179,458,168" AlternateText="W. Virginia"/>
<asp:PolygonHotSpot Coordinates="484,174,502,147,528,160,533,174,453,191,464,180,483,176" AlternateText="Virginia"/>
<asp:PolygonHotSpot Coordinates="470,189,534,176,542,188,513,218,496,206,480,206,449,212" AlternateText="N. Carolina"/>
<asp:PolygonHotSpot Coordinates="460,211,494,208,510,218,488,250,460,218" AlternateText="S. Carolina"/>
<asp:PolygonHotSpot Coordinates="433,217,457,214,487,252,483,269,477,273,445,274,445,254" AlternateText="Georgia"/>
<asp:PolygonHotSpot Coordinates="412,277,483,272,513,322,505,342,476,307,460,283,420,285" AlternateText="Florida"/>
<asp:PolygonHotSpot Coordinates="555,19,573,12,588,46,563,69,556,47" AlternateText="Maine"/>
<asp:PolygonHotSpot Coordinates="549,50,556,48,563,69,565,83,552,85" AlternateText="New Hampshire"/>
<asp:PolygonHotSpot Coordinates="537,59,549,55,549,84,545,85,541,75" AlternateText="Vermont"/>
<asp:PolygonHotSpot Coordinates="474,106,534,57,546,107,544,112,531,109,528,102,478,112" AlternateText="New York"/>
<asp:PolygonHotSpot Coordinates="469,116,474,109,478,115,527,105,533,125,526,134,477,146" AlternateText="Pennsylvania"/>
<asp:PolygonHotSpot Coordinates="544,87,565,85,576,85,576,94,566,91,547,96" AlternateText="Massachusetts"/>
<asp:PolygonHotSpot Coordinates="560,94,565,92,569,96,563,100" AlternateText="Rhode Island"/>
<asp:PolygonHotSpot Coordinates="546,97,560,94,562,101,548,105" AlternateText="Connecticut"/>
<asp:PolygonHotSpot Coordinates="532,111,545,113,544,120,542,142,529,135,535,124,530,117" AlternateText="New Jersey"/>
<asp:PolygonHotSpot Coordinates="531,139,540,153,534,153" AlternateText="Delaware"/>
<asp:PolygonHotSpot Coordinates="486,146,529,136,536,155,536,161,515,156,511,144" AlternateText="Maryland"/>
</
asp:ImageMap>
<telerik:RadToolTipManager ID="RadToolTipManager1" Style="z-index: 1000" ShowCallout="false"
Skin="Telerik" RelativeTo="Mouse" HideEvent="LeaveToolTip" Position="Center"
Animation="Fade" Width="150px" Height="150px" ContentScrolling="Auto" runat="server">
</telerik:RadToolTipManager>
</td>
</
tr>
</
table>
<
script type="text/javascript">
function AdjustSize(sender, args)
{
sender.autoSize(
true);
}
var countryArray = new Array("Delaware");
//IMPORTANT!: On the client the ASP.NET framework prepends the actual map element with the prefix "ImageMap"
var elms = document.getElementsByName('<%= "ImageMap" + MapOfUsa.ClientID %>');
var map = elms[0];
var areas = map.getElementsByTagName('area');
for (var i = 0; i < areas.length; i++)
{
var area = areas[i];
area.setAttribute(
"id", countryArray[i]);
//Prevent from postbacking the page
area.onclick =
function(e){return false;};
//remove the alt attribute to prevent the browser's tooltip from showing
area.removeAttribute(
"alt");
}
</
script>
</
asp:Content>
Thank you,
Steve