ImageMap with ToolTip and database data?

4 posts, 0 answers
  1. Steve Napurano
    Steve Napurano avatar
    40 posts
    Member since:
    Aug 2009

    Posted 26 Nov 2009 Link to this post

    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






  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 30 Nov 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve Napurano
    Steve Napurano avatar
    40 posts
    Member since:
    Aug 2009

    Posted 30 Nov 2009 Link to this post

    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
  5. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 02 Dec 2009 Link to this post

    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.
Back to Top