This is a migrated thread and some comments may be shown as answers.

ImageMap with ToolTip and database data?

3 Answers 96 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Steve Napurano
Top achievements
Rank 1
Steve Napurano asked on 26 Nov 2009, 11:34 PM
Hi, Happy Holidays...

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






3 Answers, 1 is accepted

Sort by
0
Fiko
Telerik team
answered on 30 Nov 2009, 11:05 AM
Hi Steve,

I believe that this online demo will be of help. A similar approach is used in the this demo application as well.

I hope this helps.

Sincerely yours,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Steve Napurano
Top achievements
Rank 1
answered on 30 Nov 2009, 12:55 PM
Sir, I mentioned I already saw the image map demo. It does not show what it assifned to the tooltip and how when the webservice is called. I know that I have to call the webservice, but how is the tooltip bound to the webservice and rad window.

can you show a small sample code of the webservice populating the tooltip please?

Thanks

Steve
0
Fiko
Telerik team
answered on 02 Dec 2009, 08:47 AM
Hi Steve,

For your convenience I have attached the full source code of this demo. You need to add the Telerik.Web.UI.DLL file (in the application's bin folder) in order to run it.
If you have installed the RadControls For ASP.NET AJAX, then the source code of the demo can be found in the INSTALL_DIRECTORY\Telerik\RadControls for ASP.NET AJAX Q3 2009\Live Demos\Tooltip\Examples\ImageMapToolTipManager directory.

I hope this helps.

Sincerely yours,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
ToolTip
Asked by
Steve Napurano
Top achievements
Rank 1
Answers by
Fiko
Telerik team
Steve Napurano
Top achievements
Rank 1
Share this question
or